jQuery realisiert den Gleiteffekt des Dropdown-Menüs
|
Wenn wir eine Webseite erstellen, möchten wir manchmal ein cooles und ansprechendes Dropdown-Menü haben. Obwohl wir zur Erstellung die einfachsten CSS- und JS-Elemente verwenden können, benötigen wir mit jQuery nur sehr kurze Codes, um den folgenden Effekt zu erzielen.
Ist es nicht sehr glatt? Wenn die Maus zum Ziel bewegt wird, wird automatisch ein Dropdown-Menü angezeigt. Es sind nur zwei Codezeilen erforderlich:
$(" ").hover(Funktion() {
$(diese).children(" ").slideToggle();
});Unter ihnen ist Hover eine zusammengesetzte Formulierung aus dem Vorbeigehen und Verlassen der Maus, die normalerweise so geschrieben wird
$(" ").hover(Funktion() {
$(this).children(" ").slideDown() );
}, Funktion() {
$(this).children(" ").slideUp() );
});Das heißt, schreiben Sie zwei Funktionen in Hover, eine für den Fall, dass die Maus darüberfährt, und die andere für den Fall, dass die Maus das Objekt verlässt, und trennen Sie die beiden durch ein Komma. Sie können jedoch sehen, dass ich im obigen Code nur eine Funktion geschrieben habe. Das liegt daran, dass, wenn wir nur eine Funktion in Hover schreiben, der Effekt wiederholt wird, wenn die Maus darüberfährt oder das Objekt verlässt, was einfacher zu schreiben ist. Verwenden Sie es im Gesamtcode wie folgt:
<!DOCTYPE html>
<Kopf>
<meta charset="UTF-8">
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstiltyp: keiner;
}
A {
Textdekoration: keine;
Schriftgröße: 20px;
}
.nav {
Rand: 100px;
}
.nav>li {
Position: relativ;
schweben: links;
Breite: 80px;
Höhe: 50px;
Textausrichtung: zentriert;
}
.nav li ein {
Anzeige: Block;
Breite: 100 %;
Höhe: 100%;
Zeilenhöhe: 50px;
Farbe: Schwarz;
Rand: 1px, durchgehend himmelblau;
}
.nav>li>a:hover {
Hintergrundfarbe: rosa;
}
.nav ul {
Anzeige: keine;
Position: absolut;
oben: 50px;
links: 0;
Breite: 100 %;
Rahmen links: 1px durchgezogen #FECC5B;
Rahmen rechts: 1px durchgezogen #FECC5B;
}
.nav ul li {
Rahmen unten: 1px durchgezogen #FECC5B;
}
.nav ul li a:hover {
Hintergrundfarbe: #FFF5DA;
}
</Stil>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</Kopf>
<Text>
<ul Klasse="Navigation">
<li>
<a href="#" >Nachricht</a>
<ul>
<li>
<a href="">Folgen</a>
</li>
<li>
<a href="">Kommentare</a>
</li>
<li>
Wie
</li>
</ul>
</li>
<li>
<a href="#" >Nachricht</a>
<ul>
<li>
<a href="">Folgen</a>
</li>
<li>
<a href="">Kommentare</a>
</li>
<li>
Wie
</li>
</ul>
</li>
<li>
<a href="#" >Nachricht</a>
<ul>
<li>
<a href="">Folgen</a>
</li>
<li>
<a href="">Kommentare</a>
</li>
<li>
Wie
</li>
</ul>
</li>
</ul>
<Skript>
$(Funktion() {
$(".nav>li").hover(Funktion() {
$(this).children("ul").slideToggle();
});
})
</Skript>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Öffentliche kostenlose STUN-Server
>>: Detaillierte Schritte zur Neuinstallation von VMware Tools (grafisches Tutorial)
Artikel empfehlen
Das neueste grafische Tutorial zur Installation von MySQL 8.0.16 Winx64 unter Win10
Das Herunterladen dieser Datenbank nimmt viel Zei...
Verwenden Sie Docker, um den Kong-Clusterbetrieb aufzubauen
Es ist sehr einfach, einen Kong-Cluster unter dem...
Navicat importiert CSV-Daten in MySQL
In diesem Artikel erfahren Sie, wie Sie mit Navic...
So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel
Schauen Sie sich zuerst den Code an Code kopieren ...
Eine kurze Diskussion über HTML-geordnete Listen, ungeordnete Listen und Definitionslisten
Sortierte Liste XML/HTML-CodeInhalt in die Zwisch...
CSS implementiert fünf gängige 2D-Transformationen
2D-Transformationen in CSS ermöglichen es uns, ei...
Spezifische Verwendung der MySQL-Vorbereitungsvorverarbeitung
Inhaltsverzeichnis 1. Vorverarbeitung 2. Vorbehan...
Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS
Einführung in Rahmeneigenschaften border -Eigensc...
25 Tools zur Verbesserung der Website-Benutzerfreundlichkeit und Conversion-Raten
Bei einer Website bezieht sich die Benutzerfreundl...
Detaillierte Erläuterung mehrerer Implementierungsmethoden des MySQL-Zählens nach Bedingungen
Ich habe vor Kurzem eine Reihe statistischer Funk...
Detailliertes Tutorial zur Installation von mysql5.7.21 unter einem Windows-System
MySQL Installer bietet eine benutzerfreundliche, ...
Detaillierte Erklärung des Prinzips zum Erstellen von Tomcat in Eclipse
Beim Erstellen eines Tomcat-Servers auf einem lok...
Lösen Sie das Problem des Yum-Installationsfehlers Geschützte Multilib-Versionen
Wenn ich heute nginx auf dem Cloud-Server install...
Verwenden Sie Vue, um den Effekt der Registrierungsseite zu realisieren. Vue ermöglicht die Anmeldung per SMS-Bestätigungscode.
In diesem Artikelbeispiel wird der spezifische Co...
Konvertierung einer vertikalen MySQL-Tabelle in eine horizontale Tabelle und Tutorial zur Optimierung
1. Vertikaler Tisch und horizontaler Tisch Vertik...