DropDown Flipdown Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

DropDown Flipdown Menü

Scripte > Menü Navigation


Ein 3D animiertes Drop'n'Down Menü auf CSS. (UTF-8)

CSS

Das ist ein 3D animiertes horizontales Klapp-Menü. Die Untermenüs werden Blockweise dargestellt.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü als Gleiches auf mehreren Seiten eingesetzt werden,  empfiehlt sich die Variante 2, um Änderungen nur in einer Datei durchführen zu müssen.
In der Zip-Datei befindet sich ein Verzeichnis "
dd_flipdown-menu", das so übernommen werden kann.
Die Anpassung des Menüs erfolgt dann in der Datei "menu_style.css" im Hauptverzeichnis.

Browser


Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="dd_flipdown-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<div class="menuHolder">
<ul class="nav">
 <li><a class="top-a" href="#x"><b>Hauptmenü 1</b></a></li>
 <li><a class="top-a" href="#x"><b>Hauptmenü 2</b></a>
 <div class="col3">
  <ul class="colLeft">
   <li><a href="#x">Untermenü 2.1a</a></li>
   <li><a href="#x">Untermenü 2.2a</a></li>
   <li><a href="#x">Untermenü 2.3a</a></li>
   <li><a href="#x">Untermenü 2.4a</a></li>
   <li><a href="#x">Untermenü 2.5a</a></li>
  </ul>
  <ul class="col">
   <li><a href="#x">Untermenü 2.1b</a></li>
   <li><a href="#x">Untermenü 2.2b</a></li>
   <li><a href="#x">Untermenü 2.3b</a></li>
   <li><a href="#x">Untermenü 2.4b</a></li>
  </ul>
  <ul class="colRight">
   <li><a href="#x">Untermenü 2.1c</a></li>
   <li><a href="#x">Untermenü 2.2c</a></li>
   <li><a href="#x">Untermenü 2.3c</a></li>
   <li><a href="#x">Untermenü 2.4c</a></li>
  </ul>
 </div>
 </li>
 <li><a class="top-a" href="#x"><b>Hauptmenü 3</b></a>
 <div class="col2">
  <ul class="colLeft">
   <li><a href="#x">Untermenü 3.1a</a></li>
   <li><a href="#x">Untermenü 3.2a</a></li>
   <li><a href="#x">Untermenü 3.3a</a></li>
   <li><a href="#x">Untermenü 3.4a</a></li>
   <li><a href="#x">Untermenü 3.5a</a></li>
  </ul>
  <ul class="colRight">
   <li><a href="#x">Untermenü 3.1b</a></li>
   <li><a href="#x">Untermenü 3.2b</a></li>
   <li><a href="#x">Untermenü 3.3b</a></li>
   <li><a href="#x">Untermenü 3.4b</a></li>
  </ul>
 </div>
 </li>
 <li><a class="top-a" href="#x"><b>Hauptmenü 4</b></a>
 <div class="col1">
  <ul class="colSingle">
   <li><a href="#x">Untermenü 4.1</a></li>
   <li><a href="#x">Untermenü 4.2</a></li>
   <li><a href="#x">Untermenü 4.3</a></li>
   <li><a href="#x">Untermenü 4.4</a></li>
  </ul>
 </div>
 </li>
 <li><a class="top-a" href="#x"><b>Hauptmenü 5</b></a></li>
 <li><a class="top-a" href="#x"><b>Hauptmenü 6</b></a>
 <div class="col2 left">
  <ul class="colLeft">
   <li><a href="#x">Untermenü 6.1a</a></li>
   <li><a href="#x">Untermenü 6.2a</a></li>
   <li><a href="#x">Untermenü 6.3a</a></li>
   <li><a href="#x">Untermenü 6.4a</a></li>
  </ul>
  <ul class="colRight">
   <li><a href="#x">Untermenü 6.1b</a></li>
   <li><a href="#x">Untermenü 6.2b</a></li>
   <li><a href="#x">Untermenü 6.3b</a></li>
   <li><a href="#x">Untermenü 6.4b</a></li>
  </ul>
 </div>
 </li>
</ul>
</div>



Variante 2

Code für das HTML-Objekt:


<? include "dd_flipdown-menu/index.html"; ?>


Code der CSS-Datei (menu_style.css):


.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}

.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}

.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}

.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}

.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;

-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);

-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}

.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}

.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}

.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}

.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}

.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg); }


Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Alfons Baumgarten schreibt am 18.11.2014, 13.38 Uhr

    Hallo, mir ist nicht klar, wo ich die einzelnen Dingen einfügen/speichern muss.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 9 Online
 » 86 Heute
 » 2057 Woche
 » 4774 Monat
 » 59317 Jahr
 » 305895 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü