Natives JS zur Implementierung eines Dropdown-Menüs
|
Dropdown-Menüs sind auch im wirklichen Leben weit verbreitet. Der zu ihrer Implementierung verwendete JS-Code ist fast derselbe wie der für die Tab-Auswahl und das Akkordeon, daher werde ich hier nicht näher darauf eingehen. Ich habe ein Dropdown-Menü auf Grundlage der offiziellen Website von Suning.com geschrieben. Der Implementierungscode lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dropdown-Menü</title>
<Stil>
Körper,
ul {
Polsterung: 0;
Rand: 0;
}
Körper{
Hintergrundfarbe:#ccc;
}
li {
Listenstil: keiner;
}
A{
Textdekoration: keine;
}
ein:schweben{
Farbe: RGB (235, 98, 35);
}
.nav {
schweben: rechts;
Rand oben: 10px;
Rand rechts: 80px;
Anzeige: Flex;
Breite: 270px;
Höhe: 100px;
}
.nav>li {
Breite: 80px;
Rand: 5px;
Textausrichtung: zentriert;
}
.ausgewählt{
Breite: 80px;
Hintergrundfarbe: #fff;
Farbe: RGB (235, 98, 35);
Rand: 1px durchgezogener RGB (196, 194, 194);
}
.nav>li div:n-tes-Kind(1){
Höhe: 30px;
Zeilenhöhe: 30px;
}
.nav>li div:nth-child(2){
Anzeige: keine;
Höhe: 160px;
Breite: 80px;
Hintergrundfarbe: #fff;
Rand: 1px durchgezogener RGB (196, 194, 194);
Rahmen oben: 1px durchgezogen #fff;
Zeilenhöhe: 70px;
}
.nav>li>div:nth-child(2) li{
Höhe: 40px;
Zeilenhöhe: 40px;
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Navigation">
<li>
<div><a herf="#">Meine Bestellung</a></div>
<div>
<ul>
<li><a herf="#">Zahlung steht aus</a></li>
<li><a herf="#">Warten auf Versand</a></li>
<li><a herf="#">Warten auf Lieferung</a></li>
<li><a herf="#">Wartet auf Auswertung</a></li>
</ul>
</div>
</li>
<li>
<div><a herf="#">Mein Yigoo</a></div>
<div>
<ul>
<li><a herf="#">Mein Second Hand</a></li>
<li><a herf="#">Mein Follow</a></li>
<li><a herf="#">Meine Finanzen</a></li>
<li><a herf="#">Suning-Mitglied</a></li>
</ul>
</div>
</li>
<li>
<div><a herf="#">Meine Homepage</a></div>
<div>
<ul>
<li><a herf="#">Avatar</a></li>
<li><a herf="#">Spitzname</a></li>
<li><a herf="#">Unterschrift</a></li>
<li><a herf="#">Adresse</a></li>
</ul>
</div>
</li>
</ul>
<Skript>
var s = document.querySelectorAll(".nav li div:nth-child(1)");
var d = document.querySelectorAll(".nav li div:nth-child(2)");
für(var i=0;i<s.Länge;i++){
s[i].index=i;
s[i].onmouseover=Funktion(){
für(var j=0;j<s.Länge;j++){
s[j].Klassenname="";
d[j].style.display="keine";
}
this.className="ausgewählt";
d[diesen.index].style.display="Block";
}
}
</Skript>
</body>
</html>Das Wirkungsdiagramm sieht wie folgt aus:
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:
|
<<: Installations-Tutorial zur komprimierten Version von MySQL 8.0.20 mit Bildern und Text
>>: Konfigurieren Sie eine Selenium-Umgebung basierend auf Linux und implementieren Sie den Betrieb
Artikel empfehlen
Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts
Vorwort In der täglichen Entwicklung stoßen wir h...
Eine Kurzanleitung zu MySQL-Indizes
Die Einrichtung eines MySQL-Index ist für den eff...
Detaillierte Erklärung des Vue-Plugins
Zusammenfassen Dieser Artikel endet hier. Ich hof...
Bootstrap 3.0 Studiennotizen Grid-System-Fall
Vorwort Im vorherigen Artikel haben wir hauptsäch...
So stellen Sie ein Vue-Projekt unter Nginx bereit
Heute werde ich den Server nginx verwenden und mu...
Detailliertes Linux-Installationstutorial
(Win7-System) Tutorial zur Installation einer vir...
Analyse des Framework-Prinzips des Linux-Eingabesubsystems
Eingabe-Subsystem-Framework Das Linux-Eingabesubs...
Detailliertes Tutorial zum Löschen von Linux-Benutzern mit dem Befehl userdel
Was ist Serdel userdel ist ein Low-Level-Tool zum...
Eine kurze Diskussion des interessanten Boxmodells der CSS3-Boxgrößeneigenschaft
Jeder muss die Zusammensetzung des Boxmodells von...
MySQL SQL-Anweisungsmethode zum Ausblenden der mittleren vier Ziffern der Mobiltelefonnummer
Erste Abfragetabellenstruktur (sys_users): WÄHLEN...
Lernen Sie schnell die MySQL-Grundlagen
Inhaltsverzeichnis SQL verstehen SELECT verstehen...
Verwendung der Linux Dynamic Link Library
Im Vergleich zu gewöhnlichen Programmen haben dyn...
Lösung für das Problem, dass die lokale MySQL-Anmeldung keine Portnummer zum Anmelden verwenden kann
Als ich mich kürzlich lokal unter Linux anmeldete...
CentOS 6.5-Konfiguration: SSH-Anmeldung ohne Schlüssel zur Ausführung des PSSH-Befehls – Erläuterung
1. Überprüfen und installieren Sie pssh, yum list...
Detaillierte Erläuterung der CSS BEM-Schreibstandards
BEM ist ein komponentenbasierter Ansatz zur Weben...