CSS zum Erstellen eines dynamischen sekundären Menüs
|
Dynamisches Implementieren eines einfachen sekundären Menüs
Wenn die Maus auf das Etikett der ersten Ebene gelegt wird, nimmt die Maus die Form einer kleinen Hand an, um das Menü der zweiten Ebene anzuzeigen. Der Quellcode lautet wie folgt. Sie können ihn kopieren und direkt verwenden.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {Rand: 0; Polsterung: 0;}
ul { Listenstil: keine;}
div {
Breite: 100 %;
Höhe: 50px;
Hintergrundfarbe: #ccc;
}
.Erste {
Breite: 100px;
Höhe: 50px;
schweben: links;
Rand rechts: 70px;
/* Hintergrundfarbe: rosa; */
Cursor: Zeiger;
Textausrichtung: zentriert;
Zeilenhöhe: 50px;
Rahmenradius: 15px;
}
.zweites li{
Breite: 80px;
Höhe: 50px;
Hintergrundfarbe: blau;
Randradius: 50 %;
Rand oben: 10px;
}
.zweite {
Anzeige: keine;
}
.erste:hover .zweite{
Anzeige: Block;
Cursor: Zeiger;
}
.erster:hover {
Hintergrundfarbe: rosa;
}
</Stil>
<Text>
<div>
<ul>
<li Klasse="Erste">
<p>Tag der ersten Ebene</p>
<ul Klasse="zweite">
<li>Tags der zweiten Ebene</li>
<li>Tags der zweiten Ebene</li>
</ul>
</li>
<li Klasse="Erste">
<p>Tag der ersten Ebene</p>
<ul Klasse="zweite">
<li>Tags der zweiten Ebene</li>
<li>Tags der zweiten Ebene</li>
</ul>
</li>
</ul>
</div>
</body>
</html>Zusammenfassen Dies ist das Ende dieses Artikels über die Implementierung eines dynamischen Sekundärmenüs mit CSS. Weitere relevante CSS-Inhalte für dynamische Sekundärmenüs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt
Artikel empfehlen
Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)
Vorne geschrieben Weibo-Komponenten sind Komponen...
Lösen Sie das Problem, dass der anonyme Upload und Download von Linux-FTP automatisch startet
Wenn Sie den FTP-Server häufig in Ihrem Studium o...
Vorteile und Prinzipien der MySQL-Replikation im Detail erklärt
Bei der Replikation werden die DDL- und DML-Opera...
Detaillierter Installationsprozess von mysql5.7.21 unter Win10
In diesem Artikel erfahren Sie mehr über die Inst...
Implementierung der Nginx-Konfiguration https
Inhaltsverzeichnis 1: Bereiten Sie das https-Zert...
Implementierungscode zum Betreiben einer MySQL-Datenbank in Golang
Vorwort Golang stellt das Datenbank-/SQL-Paket fü...
Eine kurze Erläuterung, warum Daemon Off beim Ausführen von Nginx in Docker verwendet wird
Ich bin sehr glücklich. Wenn ich auf dieses Probl...
Verwenden von Vue zum Implementieren einer Timerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten
Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...
So verhindern Sie doppelte Übermittlungen in einem JQuery-Projekt
In neuen Projekten kann Axios doppelte Übermittlu...
8 Möglichkeiten zum manuellen und automatischen Sichern Ihrer MySQL-Datenbank
MySQL ist ein beliebtes Open-Source-Datenbankverw...
Nutzerbedürfnisse führen zu marketingorientiertem Design
<br />Zu jedem unserer Themen bespricht das ...
Details zur Verwendung von Klassenstilen in Vue
Inhaltsverzeichnis 1. Boolesche Werte 2. Ausdruck...
Docker-Einstellung für den Windows-Speicherpfadvorgang
Wenn Sie Docker unter Windows 10 installieren und...
Spezifische Verwendung von Bootstrap5-Haltepunkten und Containern
Inhaltsverzeichnis 1. Bootstrap5-Haltepunkte 1.1 ...