DropDown Flyout Menü
Scripte > Menü Navigation
Ein Drop'n'Down Menü mit Farbwahl auf CSS-Basis
Ein animiertes horizontales Menü, wo die Hintergrund-Farbe des Untermenüs über die Classifizierung voreingestellt werden kann. Für das Menü werden keine Image-Dateien benötigt, da das gesamte Menü über die CSS-Datei "menu_style.css" gesteuert wird, wo auch die Anpassungen an die Homepage erfolgen.
Es sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per
<?php include "...."; ?> , um Textänderungen des Menüs nur in einer Datei durchführen zu müssen. Dann muss die ausführende Datei die Dateiendung .php aufweisen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Die Farbe des Untermenüs wird in der ersten Zeile des HTML-Codes festgelegt, hier in rot:
<div class="Obj139 red"> <!-- Festlegung in rot -->
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj139_0/menu_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj139_0/menu_inc.html"; ?>
alternative Einbindung:
<!-- Festlegung der Untermenü-Farbe (red, orange, yellow, green, blue, indigo, violet, grey) -->
<div class="Obj139 red"> <!-- Festlegung in rot -->
<ul>
<li><a href="#">Hauptmenü 1</a></li><li><a href="#">Hauptmenü 2 ›</a>
<ul>
<li><a href="#">Untermenü 2.1</a></li><li><a href="#">Untermenü 2.2</a></li><li><a href="#">Untermenü 2.3</a></li><li><a href="#">Untermenü 2.4</a></li>
</ul>
</li>
<li><a href="#">Hauptmenü 3 ›</a>
<ul>
<li><a href="#">Untermenü 3.1</a></li><li><a href="#">Untermenü 3.2 ›</a>
<ul><li><a href="#">Untermenü 3.2.1</a></li><li><a href="#">Untermenü 3.2.2</a></li><li><a href="#">Untermenü 3.2.3 ›</a><ul><li><a href="#">Untermenü 3.2.3.1</a></li><li><a href="#">Untermenü 3.2.3.2</a></li><li><a href="#">Untermenü 3.2.3.3</a></li><li><a href="#">Untermenü 3.2.3.4</a></li></ul></li><li><a href="#">Untermenü 3.2.4</a></li></ul>
</li>
<li><a href="#">Untermenü 3.3</a></li><li><a href="#">Untermenü 3.4 ›</a>
<ul><li><a href="#">Untermenü 3.4.1</a></li><li><a href="#">Untermenü 3.4.2</a></li><li><a href="#">Untermenü 3.4.3</a></li><li><a href="#">Untermenü 3.4.4</a><b></b></li>
</ul>
</li>
<li><a href="#">Untermenü 3.5 ›</a>
<ul><li><a href="#">Untermenü 3.5.1</a></li><li><a href="#">Untermenü 3.5.2</a></li><li><a href="#">Untermenü 3.5.3</a></li></ul>
</li>
</ul></li>
<li><a href="#">Hauptmenü 4 ›</a>
<ul>
<li><a href="#">Untermenü 4.1</a></li><li><a href="#">Untermenü 4.2</a></li><li><a href="#">Untermenü 4.3</a></li><li><a href="#">Untermenü 4.4</a></li>
</ul></li>
<li><a href="#">Hauptmenü 5 ›</a>
<ul>
<li><a href="#">Untermenü 5.1</a></li><li><a href="#">‹ Untermenü 5.2</a><ul>
<li><a href="#">Untermenü 5.2.1</a></li><li><a href="#">Untermenü 5.2.2</a></li><li><a href="#">‹ Untermenü 5.2.3</a><ul><li><a href="#">Untermenü 5.2.3.1</a></li><li><a href="#">Untermenü 5.2.3.2</a></li><li><a href="#">Untermenü 5.2.3.3</a></li><li><a href="#">Untermenü 5.2.3.4</a></li></ul></li><li><a href="#">Untermenü 5.2.4</a></li><li><a href="#">Untermenü 5.2.5</a></li>
</ul></li><li><a href="#">‹ Untermenü 5.3</a><ul><li><a href="#">Untermenü 5.3.1</a></li><li><a href="#">Untermenü 5.3.2</a></li><li><a href="#">Untermenü 5.3.3</a></li><li><a href="#">Untermenü 5.3.4</a></li></ul></li>
<li><a href="#">Untermenü 5.4</a></li>
</ul>
</li>
<li><a href="#">Hauptmenü 6</a></li>
</ul>
</div>
Code Datei "menu_style.css"
.Obj139 { position: relative; width: 820px; margin: 0 auto; text-align: center; }
.Obj139 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);}
.Obj139 ul { display: inline; }
.Obj139 li { margin: 0; padding: 0; list-style: none; }
.Obj139 li { display: inline-block; display: inline; }
.Obj139 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;}
.Obj139 ul ul ul { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.Obj139.red ul ul { background-color: #d00; }
.Obj139.orange ul ul { background-color: #c60; }
.Obj139.yellow ul ul { background-color: #da2; }
.Obj139.green ul ul { background-color: #494; }
.Obj139.blue ul ul { background-color: #0bf; }
.Obj139.indigo ul ul { background-color: #95d; }
.Obj139.violet ul ul { background-color: #c6c; }
.Obj139.grey ul ul { background-color: #888; }
.Obj139 > ul { display: table; margin: 0 auto; }
.Obj139 > ul > li { float: left; display: block; position: relative; z-index: 100; }
.Obj139 > ul > li:hover { display: inline-block; z-index: 10; }
.Obj139 ul a {
display: block;font: 15px/30px "Federo", arial,sans-serif;color: #fff;text-decoration: none;padding: 0 20px;}
.Obj139 > ul > li > a {
-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
.Obj139 > ul > li:first-child > a,
.Obj139 > ul > li:last-child > a { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.Obj139 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));}
.Obj139 ul li:hover > ul { left: 0; top: 30px; z-index:-1; }
.Obj139 ul ul li:hover > ul { left: 100%; top: auto; margin-top: -47px; margin-left: -10px; z-index: 10; }
.Obj139 > 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);}
.Obj139 > 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);}
.Obj139 li.left ul a { text-align: right; }
.Obj139 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);}
.Obj139.red li:hover > a { background-color: #d00; }
.Obj139.orange li:hover > a { background-color: #c60; }
.Obj139.yellow li:hover > a { background-color: #da2; }
.Obj139.green li:hover > a { background-color: #494; }
.Obj139.blue li:hover > a { background-color: #0bf; }
.Obj139.indigo li:hover > a { background-color: #95d; }
.Obj139.violet li:hover > a { background-color: #c6c; }
.Obj139.grey li:hover > a { background-color: #888; }
.Obj139 span { display: block; position: absolute; right: 9999px; top: -35px; }
» nach oben «