DropDown Flyout Menü - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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
Downloads:
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; }
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 15 Heute
            » 119 Gestern
            » 544 Woche
            » 908 Monat
            » 42122 Jahr
            » 266328 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt