Beispielcode zum Erstellen eines Dropdown-Menüs mit reinem CSS
|
Einführung: Es ist immer noch dasselbe. Kommen wir ohne weitere Umschweife direkt zu den Renderings. 1. Eine Schaltfläche, bevor sie angeklickt wird (auf einem Mobiltelefon) oder wenn die Maus nicht zeigt (auf einem PC)
2. Nach dem Klicken oder Zeigen mit der Maus.
Das Dropdown-Menü kann angezeigt werden und sein Implementierungsprinzip ist ebenfalls sehr einfach. Sie müssen sich nur einen Punkt merken: Hover, dieses Attribut. Lassen Sie uns direkt in den Code einsteigen und ihn später erklären.
<!DOCTYPE html>
<html>
<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">
<Stil>
li{
Listenstil: keiner;
Höhe: 28px;
}
#Speisekarte{
Anzeige: Inline-Block;
}
#Menü #Liste {
maximale Höhe: 0;
Übergang: max. Höhe 0,25 s, Ausklang;
Überlauf: versteckt;
Hintergrund: #f5f4f4;
Breite: 80px;
Rand: 0;
Polsterung: 0;
Textausrichtung: zentriert;
}
#Menü:Hover #Liste {
maximale Höhe: 200px;
Übergang: max. Höhe 0,25 s Eingewöhnungszeit;
Breite: 80px;
Rand: 0;
Polsterung: 0;
}
.Taste{
Höhe: 32px;
Breite: 80px;
Rand oben: 6px;
Rahmenradius: 4px;
Farbe: #fff;
Polsterung links: 0;
Polsterung rechts: 0;
Zeilenhöhe: 32px;
Hintergrund: #E33E33;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<div id="Menü">
<div class="button">Weitere Informationen</div>
<ul id="Liste">
<li>Persönliches Zentrum</li>
<li>Mein Blog</li>
<li>Einstellungen</li>
<li>Abmelden</li>
<li>Abmelden</li>
</ul>
</div>
</body>
</html>Sie müssen nur ein Div festlegen und es dann auf zwei Zustände einstellen, einen ohne :hover und einen mit :hover. Und wenn kein :hover vorhanden ist, stellen Sie das Menü einfach so ein, dass es ausgeblendet wird (overflow: hidden;), und der Rest des Codes ist ein einfaches Boxmodell. Jetzt reden wir über :hover. Was ist das? Es ist ein CSS-Selektor, der verwendet wird, um das Element auszuwählen, über dem der Mauszeiger schwebt. Wenn also mit der Maus über das Mobiltelefon gefahren wird oder darauf geklickt wird, wird dieses Attribut ausgelöst und das Dropdown-Menü angezeigt. Gleichzeitig haben wir das Übergangsattribut hinzugefügt, um dem Dropdown-Menü einen Farbverlaufseffekt zu verleihen, sodass es sich eher so anfühlt, als würde es nach unten gezogen. Ist der CSS-Selektor also nicht magisch? Bei richtiger Verwendung müssen Sie nicht viel JS-Code schreiben. Ich werde künftig eine Kolumne zu CSS-Selektoren erstellen und dann alle CSS-Selektoren systematisch vorstellen.
Zusammenfassen Damit ist dieser Artikel über die Verwendung von reinem CSS zum Erstellen eines Beispielcodes für eine Dropdown-Menüfunktion abgeschlossen. Weitere relevante CSS-Dropdown-Menüinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.
>>: Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr
Artikel empfehlen
Ein MySQL-Migrationsplan und eine praktische Auflistung der Fallstricke
Inhaltsverzeichnis Hintergrund Lösung 1: Alte Dat...
JavaScript-Tipps zur Verbesserung Ihrer Programmierkenntnisse
Inhaltsverzeichnis 1. Filtern Sie eindeutige Wert...
nuxt.js Konfiguration mehrerer Umgebungsvariablen
Inhaltsverzeichnis 1. Einleitung 2. Szenario 3. S...
MySQL Online-Übung zur Deadlock-Analyse
Vorwort Ich glaube, dass jeder beim Erlernen von ...
Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen
Vorwort Wir müssen bestimmte Daten abrufen, die d...
JavaScript implementiert eine verschiebbare Modalbox
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erklärung des Prinzips und der Funktion des JavaScript-Closures
Inhaltsverzeichnis Einführung Verwendung von Vers...
Detaillierte Erläuterung zur Verwendung von Node.js zum Implementieren einer Hot-Reload-Seite
Vorwort Vor nicht allzu langer Zeit habe ich Brow...
So verwenden Sie eine Multi-Core-CPU, um Ihre Linux-Befehle zu beschleunigen (GNU Parallel)
Mussten Sie schon einmal sehr große Datenmengen (...
So zeigen Sie Docker-Containerprotokolle an und bereinigen sie (getestet und effektiv)
1. Problem Die Docker-Containerprotokolle führten...
Ein Vergleich zwischen dem href-Attribut und dem onclick-Ereignis des a-Tags
Lassen Sie uns zunächst über die Ausführungsreihe...
Analyse des Implementierungsprozesses der drei Modi des VMWare-Netzwerkadapters
Drei Modi Bridged (Bridge-Modus), NAT (Network Ad...
Einige Vorschläge zur Lesbarkeit des Vue-Codes
Inhaltsverzeichnis 1. Nutzen Sie Komponenten sinn...
Tutorial zur Installation und Konfiguration des Linux-Prozessmanagement-Tools Supervisor
Umgebung: CentOS 7 Offizielle Dokumentation: http...
vue-pdf realisiert Online-Dateivorschau
In diesem Artikelbeispiel wird der spezifische Co...