DropDown Flyout Menü - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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 -->
Download Button
x runter geladen
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 &#8250;</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 &#8250;</a>
<ul>
<li><a href="#">Untermenü 3.1</a></li>
<li><a href="#">Untermenü 3.2 &#8250;</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 &#8250;</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 &#8250;</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 &#8250;</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 &#8250;</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 &#8250;</a>
<ul>
<li><a href="#">Untermenü 5.1</a></li>
<li><a href="#">&#8249; 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="#">&#8249; 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="#">&#8249; 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 «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt