DropDown Flyout Menü - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

DropDown Flyout Menü

Scripte > Menü Navigation


Ein Drop'n'Down Menü mit Farbwahl (UTF-8)

CSS

Ein animiertes horizontales Menü, wo die Menü-Hover Farbe über die Classifizierung voreingestellt werden kann.
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_flyout-menu", das so übernommen werden kann.

Die Farbe des Menü-Hover wird in der ersten Zeile des Menü-Code festgelegt, hier in grau:


<div class="flyoutMenu grey"> <!-- Festlegung in grau -->


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_flyout-menu/menu_style.css" />



Variante 1


Code für das HTML-Objekt:

<!-- Festlegung der Menü-Hover Farbe (red, orange, yellow, green, blue, indigo, violet, grey) -->
<div class="flyoutMenu grey">
<!-- Festlegung -->

<ul>
 <li><a href="#x">Hauptmenü 1</a></li>
 <li><a href="#x">Hauptmenü 2 &#8250;</a>
  <ul>
   <li><a href="#x">Untermenü 2.1</a></li>
   <li><a href="#x">Untermenü 2.2</a></li>
   <li><a href="#x">Untermenü 2.3</a></li>
   <li><a href="#x">Untermenü 2.4</a></li>
  </ul>
 </li>
 <li><a href="#x">Hauptmenü 3 &#8250;</a>
  <ul>
   <li><a href="#x">Untermenü 3.1</a></li>
   <li><a href="#x">Untermenü 3.2 &#8250;</a>
    <ul>
     <li><a href="#x">Untermenü 3.2.1</a></li>
     <li><a href="#x">Untermenü 3.2.2</a></li>
     <li><a href="#x">Untermenü 3.2.3 &#8250;</a>
      <ul>
       <li><a href="#x">Untermenü 3.2.3.1</a></li>
       <li><a href="#x">Untermenü 3.2.3.2</a></li>
       <li><a href="#x">Untermenü 3.2.3.3</a></li>
       <li><a href="#x">Untermenü 3.2.3.4</a></li>
      </ul>
     </li>
     <li><a href="#x">Untermenü 3.2.4</a></li>
    </ul>
   </li>
   <li><a href="#x">Untermenü 3.3</a></li>
   <li><a href="#x">Untermenü 3.4 &#8250;</a>
    <ul>
     <li><a href="#x">Untermenü 3.4.1</a></li>
     <li><a href="#x">Untermenü 3.4.2</a></li>
     <li><a href="#x">Untermenü 3.4.3</a></li>
     <li><a href="#x">Untermenü 3.4.4</a><b></b></li>
    </ul>
   </li>
   <li><a href="#x">Untermenü 3.5 &#8250;</a>
    <ul>
     <li><a href="#x">Untermenü 3.5.1</a></li>
     <li><a href="#x">Untermenü 3.5.2</a></li>
     <li><a href="#x">Untermenü 3.5.3</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><a href="#x">Hauptmenü 4 &#8250;</a>
  <ul>
   <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>
 </li>
 <li><a href="#x">Hauptmenü 5 &#8250;</a>
  <ul>
   <li><a href="#x">Untermenü 5.1</a></li>
   <li><a href="#x">&#8249; Untermenü 5.2</a>
    <ul>
     <li><a href="#x">Untermenü 5.2.1</a></li>
     <li><a href="#x">Untermenü 5.2.2</a></li>
     <li><a href="#x">&#8249; Untermenü 5.2.3</a>
      <ul>
       <li><a href="#x">Untermenü 5.2.3.1</a></li>
       <li><a href="#x">Untermenü 5.2.3.2</a></li>
       <li><a href="#x">Untermenü 5.2.3.3</a></li>
       <li><a href="#x">Untermenü 5.2.3.4</a></li>
      </ul>
     </li>
     <li><a href="#x">Untermenü 5.2.4</a></li>
     <li><a href="#x">Untermenü 5.2.5</a></li>
    </ul>
   </li>
   <li><a href="#x">&#8249; Untermenü 5.3</a>
    <ul>
     <li><a href="#x">Untermenü 5.3.1</a></li>
     <li><a href="#x">Untermenü 5.3.2</a></li>
     <li><a href="#x">Untermenü 5.3.3</a></li>
     <li><a href="#x">Untermenü 5.3.4</a></li>
    </ul>
   </li>
   <li><a href="#x">Untermenü 5.4</a></li>
  </ul>
 </li>
 <li><a href="#x">Hauptmenü 6</a></li>
</ul>
</div>



Variante 2

Code für das HTML-Objekt:


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


Code der CSS-Datei (menu_style.css):

.flyoutMenu {position:relative; width:850px; margin:0 auto; text-align:center;}

.flyoutMenu ul {margin:0; list-style:none; white-space:nowrap; text-align:left; display:inline-block; background:#000; padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:2px 3px 5px rgba(0,0,0,0.4);
-webkit-box-shadow:3px 2px 5px rgba(0,0,0,0.4);
box-shadow:2px 3px 5px rgba(0,0,0,0.4);
}
.flyoutMenu ul {display:inline;}

.flyoutMenu li {margin:0; padding:0; list-style:none;}
.flyoutMenu li {display:inline-block; display:inline;}
.flyoutMenu ul ul {position:absolute; left:-9999px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.flyoutMenu ul ul ul {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.flyoutMenu.red ul ul {background-color:#d00;}
.flyoutMenu.orange ul ul {background-color:#c60;}
.flyoutMenu.yellow ul ul {background-color:#da2;}
.flyoutMenu.green ul ul {background-color:#494;}
.flyoutMenu.blue ul ul {background-color:#0bf;}
.flyoutMenu.indigo ul ul {background-color:#95d;}
.flyoutMenu.violet ul ul {background-color:#c6c;}
.flyoutMenu.grey ul ul {background-color:#888;}

.flyoutMenu > ul {display:table; margin:0 auto;}
.flyoutMenu > ul > li {float:left; display:block; position:relative; z-index:100;}
.flyoutMenu > ul > li:hover {display:inline-block; z-index:10;}

.flyoutMenu ul a {display:block; font:15px/30px "Federo", arial,sans-serif; color:#fff; text-decoration:none; padding:0 20px;}
.flyoutMenu > ul > li > a {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.flyoutMenu > ul > li:first-child > a,
.flyoutMenu > ul > li:last-child > a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.flyoutMenu ul ul a {padding:0 10px; margin:5px 0; line-height:25px; border:1px solid #000; border-color:rgba(255,255,255,0.4) rgba(0,0,0,0.2) rgba(0,0,0,0.3) rgba(255,255,255,0.3); text-shadow:0 -1px 2px rgba(0, 0, 0, 0.6);
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
background-image:linear-gradient(-90deg,rgba(255,255,255,0.2),rgba(255,255,255,0));
}

.flyoutMenu ul li:hover > ul {left:0; top:30px; z-index:-1;}
.flyoutMenu ul ul li:hover > ul {left:100%; top:auto; margin-top:-47px; margin-left:-10px; z-index:10;}

.flyoutMenu > ul > li:nth-of-type(5):hover > ul {left:auto; right:0; top:30px; z-index:-1; text-align:right;
-moz-box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
-webkit-box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
}
.flyoutMenu > ul > li:nth-of-type(5) ul li:hover > ul {left:auto; right:100%; top:auto; margin-top:-47px; margin-right:-10px; z-index:10; text-align:right;
-moz-box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
-webkit-box-shadow:-3px 2px 5px rgba(0,0,0,0.4);
box-shadow:-2px 3px 5px rgba(0,0,0,0.4);
}

.flyoutMenu li.left ul a {text-align:right;}

.flyoutMenu ul ul li:hover > a {
text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
background-image:linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.1));
border-color: rgba(0,0,0,0.3) rgba(255,255,255,0.4) rgba(255,255,255,0.3) rgba(0,0,0,0.1);
}

.flyoutMenu.red li:hover > a {background-color:#d00;}
.flyoutMenu.orange li:hover > a {background-color:#c60;}
.flyoutMenu.yellow li:hover > a {background-color:#da2;}
.flyoutMenu.green li:hover > a {background-color:#494;}
.flyoutMenu.blue li:hover > a {background-color:#0bf;}
.flyoutMenu.indigo li:hover > a {background-color:#95d;}
.flyoutMenu.violet li:hover > a {background-color:#c6c;}
.flyoutMenu.grey li:hover > a {background-color:#888;}
.flyoutMenu span {display:block; position:absolute; right:9999px; top:-35px;}

Feedbacks zu ""

es gibt insgesamt 0 Kommentar(e)



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

© 2009 - 2018




  Besucher Statistik
 » 4 Online
 » 109 Heute
 » 1228 Woche
 » 4561 Monat
 » 36632 Jahr
 » 283210 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü