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
Wichtige Punkte zum Schreiben von Inhalten für META-Tags in HTML-Webseiten
Das META-Tag ist ein Hilfstag im Kopfbereich der ...
Mehrere Methoden zum Ändern des MySQL-Root-Passworts (empfohlen)
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Detaillierte Erläuterung nativer Javascript-Vererbungsmethoden und ihrer Vor- und Nachteile
Inhaltsverzeichnis Vorwort Prototypische Vererbun...
So richten Sie virtuelle Verzeichnisse ein und konfigurieren virtuelle Pfade in Tomcat 7.0
Tomcat7.0 legt virtuelles Verzeichnis fest (1) De...
Tutorial zum Konfigurieren und Verwenden des i3-Fenstermanagers unter Linux
In diesem Artikel zeige ich Ihnen, wie Sie i3 auf...
Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung
Einige von Ihnen haben vielleicht gehört, dass di...
Freigabe der Schritte zum SVN-Dienstsicherungsvorgang
Schritte zur Sicherung des SVN-Dienstes 1. Quells...
Centos erstellt ein Prozessdiagramm für den Chrony-Zeitsynchronisationsserver
Meine Umgebung: 3 centos7.5 1804 Meister 192.168....
InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her
Voraussetzung: Speichern Sie die .frm- und .ibd-D...
So verwenden Sie Lottie-Animationen in React Native-Projekten
Lottie ist eine von Airbnb entwickelte Open-Sourc...
So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet
Herkunft Zurzeit arbeite ich an Anforderung A, in...
Mehrere Möglichkeiten zum einfachen Durchlaufen von Objekteigenschaften in JS
Inhaltsverzeichnis 1. Selbstaufzählbare Eigenscha...
MySQL-Einstellungen zum Ändern des Root-Passworts, MySQL-Serververbindung, Diagramm allgemeiner MySQL-Befehle
1. Root-Passwort festlegen und ändern Überprüfen ...
Konstruktions- und Nutzungsprozess des Vue3.0-Projekts
Inhaltsverzeichnis 1. Projektkonstruktion 2: Verz...
Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native
Inhaltsverzeichnis 1. Benutzerdefiniertes Routing...