Heim >
Web-Frontend >
js-Tutorial >
So implementieren Sie ein unendliches hierarchisches horizontales Navigationsmenü mit jquery_jquery
So implementieren Sie ein unendliches hierarchisches horizontales Navigationsmenü mit jquery_jquery
WBOY
Freigeben: 2016-05-16 16:10:08
Original
1580 Leute haben es durchsucht
Das Beispiel in diesem Artikel beschreibt, wie jquery unendliche hierarchische horizontale Navigationsmenüs implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
1. Der Versionscode des JQuery-Plug-Ins lautet wie folgt:
}
.droplinebar ul.dropmenu {
Position: relativ;
}
.droplinebar ul{
Breite: 100 %;
float: links;
Schriftart: fett 13px Arial;
Hintergrund: #242c54 url(bluedefault.gif) Center Center Repeat-X; /*Standardhintergrund der Menüleiste*/
}
.droplinebar ul li{
float:left;
}
.droplinebar ul ul {
Breite: 700px;
Anzeige:keine;
Z-Index: 100;
Position:absolut;
Links:0;
Hintergrund: #303c76;
Zoom: 1;
}
.droplinebar ul li a{
float: links;
Farbe: weiß;
Polsterung: 9px 11px;
Textdekoration: keine;
Anzeige:blockieren;
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*Hintergrund der Hauptmenüleisten-Links bei Mouseover*/
Farbe: weiß;
Hintergrund: transparente URL (blueactive.gif) Mitte Mitte Wiederholung-x;
}
/* Stil für Untermenü-Links */
.droplinebar ul li ul li a{
Schriftart: normal 13px Verdana;
Polsterung: 6px;
padding-right: 8px;
Rand: 0;
Rand unten: 1px einfarbiges Marineblau;
}
.droplinebar ul li ul li a:hover{ /*Hintergrundfarbe der Untermenü-Links bei Mouseover */
Hintergrund: #242c54;
}
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn