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
Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern
Lassen Sie uns über einige Probleme sprechen, die ...
Prinzipanalyse des UDP-Verbindungsobjekts und Anwendungsbeispiele
Ich habe zuvor zum Einstieg in UDP ein einfaches ...
Tutorial zur Installation von MySQL auf Alibaba Cloud Centos 7.5
Es scheint, dass die MySQL-Server-Datei zur norma...
Details zur Destrukturierungszuweisung in Javascript
Inhaltsverzeichnis 1. Array-Dekonstruktion 2. Obj...
Tutorial zur Docker-Installation in einer Linux-Umgebung
1. Installationsumgebung Docker unterstützt die f...
Detaillierte Erklärung der Methoden des fs-Moduls und des Path-Moduls in Node.js
Überblick: Das Dateisystemmodul ist ein einfacher...
Vue-Überwachungseigenschaften und berechnete Eigenschaften
Inhaltsverzeichnis 1. Überwachungseigenschaften a...
Detaillierte Erläuterung der Leistungsüberwachung des MySQL-Servers mit Prometheus und Grafana
Überblick Prometheus ist ein Open-Source-Dienstüb...
Util-Modul im node.js-Tutorial-Beispiel – detaillierte Erklärung
Inhaltsverzeichnis Ausgehend von der Typbeurteilu...
Detailliertes Beispiel der Sortierfunktion field() in MySQL
Vorwort In unserem täglichen Entwicklungsprozess ...
CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch
Ich bin schon vor langer Zeit mit CSS in Berührun...
Eine kurze Erläuterung, wo das vom Knoten mithilfe von JWT generierte Token gespeichert werden soll
A: Normalerweise im Client gespeichert. jwt oder ...
Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?
Viele Organisationen müssen Dateiserver sichern u...
Allgemeine Symbole in Unicode
Unicode ist ein von einer internationalen Organis...
Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können
Inhaltsverzeichnis DOM-Verarbeitung Arrays Verfah...