DropDown Flyout Menü - Website X5 Hilfe - Die 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 Menü-Hover Farbe ü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 erfolgen.
Hier 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. Hier muss aber die ausführende Datei die Dateiendung .php aufweisen, um den Code ausführen zu können. Bei Direkteinbindung kann auch eine .html als ausführende Datei genutzt werden.
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.
Die Farbe des Menü-Hover wird in der ersten Zeile des Menü-Codes festgelegt, hier in orange:
<div class="flyoutMenu orange"> <!-- Festlegung in orange -->
Download Button
x runter geladen!
Code für den <HEAD> Bereich
<!-- Hinweis: Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj139_0/jquery.min.js"></script>
<script type="text/javascript" src="wsX5Obj/Obj139_0/color_switcher.js"></script>
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj139_0/menu_style.css" />
<link rel="stylesheet" type="text/css" href="wsX5Obj/Obj139_0/color_style.css" />
Code für den <BODY> Bereich
<?php include "wsX5Obj/Obj139_0/index.html"; ?>

alternative Einbindung:
<!-- Festlegung der Menü-Hover Farbe (red, orange, yellow, green, blue, indigo, violet, grey) -->
<div class="Obj139 orange"> <!-- Festlegung -->
<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; }
Code Datei "color_style.css"
/* Menü Styling - kein Part für das Menü */
.colorScheme {
padding: 0;
margin: 0;
list-style: none;
width: 600px;
height: 32px;
margin: 0 auto;
font-family: arial;
color: black;
}
.colorScheme li.red { background-color: #d00; border-color: #888;}
.colorScheme li.orange { background-color: #c60; }
.colorScheme li.yellow { background-color: #da2; }
.colorScheme li.green { background-color: #494; }
.colorScheme li.blue { background-color: #0bf; }
.colorScheme li.indigo { background-color: #95d; }
.colorScheme li.violet { background-color: #c6c; }
.colorScheme li.grey { background-color: #888; }
.colorScheme li {
float: left;
width: 65px;
height: 30px;
margin: 0 5px;
cursor: pointer;
-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);
}
Code Datei "color_switcher.js"
/* Farben switcher script */
$(document).ready(function() {
$(".colorScheme li").click(function(){
$(".colorScheme li").css('borderColor','#fff');
$(this).css('borderColor','#888');
$(".Obj139").removeClass().addClass('Obj139');
color = $(this).attr('class');
$(".Obj139").addClass(color);
});
});
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 3 Online
» 87 Heute
» 221 Gestern
» 308 Woche
» 2308 Monat
» 137225 Jahr
» 464981 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt