In diesem Tutorial wird Schritt für Schritt erklärt, wie Sie mit JQuery und CSS ein cooles dynamisches Menü erstellen. Die Funktion „Weniger schreiben, mehr tun“ von jQuery ist jedem bekannt, der über die bereitgestellte API schnell lernen kann, wie man sie verwendet Sie können die Implementierungsprinzipien jeder Hauptfunktion von jQuery verstehen. Lassen Sie uns nicht über andere Dinge sprechen. Schauen wir uns einfach an, wie Sie damit den magischen Effekt des Menüs erzielen.
.jpg)
Sie können auf klicken , um die Demo anzuzeigen oder den Quellcode herunterzuladen .
Schritt 1 – HTML-Struktur
Schauen Sie sich den HTML-Code des Menüs an. Er unterscheidet sich nicht vom normalen Menücode:
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Startseite</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Ressourcen</a></li>
<li><a href="javascript:;">Tutorials</a></li>
<li><a href="javascript:;">Über</a></li>
</ul>
</div>
Der Schlüssel besteht darin, Skripte zu verwenden, um in jedem Ankerpunkt (einem Element) mehrere separate Ebenen zu erstellen, sodass sie so gesteuert werden können, dass sie separat animiert werden, wenn die Maus darüber bewegt wird. Dazu müssen wir die Struktur des DOM beim Laden des DOM ändern, sodass jeder Ankercode wie folgt aussieht:
<a href="javascript:;">
<span class="out">Startseite</span>
<span class="bg"></span>
<span class="over">Startseite</span>
</a>
Der Inhalt jedes ursprünglichen Ankerpunkts wird an zwei Span-Elemente (.out und .over) angehängt, und das andere Span-Element (.bg) ist die Hintergrundbildebene.
Informationen zum Ändern der DOM-Struktur finden Sie im JS-Code in Schritt 3.
Schritt 2 – CSS-Stil
Im Beispiel werden zwei Stile gezeigt, einer mit Hintergrundbild und einer ohne Hintergrundbild (Details finden Sie in der Demo). Sie können auch Ihren eigenen Stil anpassen, um ein cooleres Menü zu entwerfen :
/* Das Folgende ist der Grundstil des Menüs
*/.menuulli{
schweben: links;
/* Der Inhalt des Menü-Unterelements ist nicht sichtbar */
Überlauf: versteckt;
/* Einige Codes werden unten weggelassen*/
}
.menu ul li a {
/* Muss eine relative Positionierung sein */
Position: relativ;
Anzeige: Block;
Breite: 110px;
/* Einige Codes werden unten weggelassen*/
}
.menu ul li a span {
/* Alle Ebenen verwenden die absolute Positionierung */
Position: absolut;
links: 0;
Breite: 110px;
}
.menu ul li a span.out {
oben: 0px;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* Anfänglich sind die .over-Ebene und die .bg-Ebene -45 Pixel relativ zum a-Element, um den versteckten Effekt zu erzielen*/
oben: -45px;}/
*Das Folgende ist ein Beispiel für die Verwendung eines Hintergrundbilds*/
#Speisekarte {
/*Menühintergrund*/
Hintergrund: URL (bg_menu.gif) Scrollen 0 -1 Pixel Wiederholung-x;
border:1px solid #CCC;}
#menu ul li a {
Farbe: #000;
}
#menu ul li a span.over {
Farbe: #FFF;
}
#menu ul li span.bg {
/* Höhe und Hintergrundbild angeben*/
Höhe: 45px;
Hintergrund: url(bg_over.gif) Mitte Mitte keine Wiederholung;
}
Sie können den CSS-Stil auch selbst anpassen. Eine vereinfachte Version des Stils wird hier ebenfalls bereitgestellt ( Demo ansehen ).