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
H-Tags sollten bei der Erstellung von Webseiten sinnvoll verwendet werden
HTML-Tags haben spezielle Tags zur Handhabung des ...
Beispiel für die Einrichtung und Verwendung des HTML-Floating-Frames (Iframe lädt HTML)
Code kopieren Der Code lautet wie folgt: <!DOC...
So verwenden Sie griechische Buchstaben in HTML-Seiten
Griechische Buchstaben sind eine sehr häufig verw...
Unterschied zwischen MySQL-Update-Set und und
Inhaltsverzeichnis Problembeschreibung Ursachenan...
Vorteile von MySQL-Abdeckungsindizes
Ein allgemeiner Vorschlag besteht darin, Indizes ...
Implementierung der Nginx-Lastverteilung/SSL-Konfiguration
Was ist Lastenausgleich? Wenn ein Domänenname auf...
Die häufigsten Fehler beim Schreiben von HTML-Tags
Wir sollten besser aufpassen, denn die HTML-Poliz...
So rufen Sie die Browser-Sharing-Funktion in Vue auf
Vorwort Vue (ausgesprochen /vjuː/, ähnlich wie vi...
So installieren Sie Nginx in CentOS7 und konfigurieren den automatischen Start
1. Laden Sie das Installationspaket von der offiz...
Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage
Im Allgemeinen muss, nachdem sich auf der linken ...
Detaillierte Erläuterung der neuen relationalen Datenbankfunktionen in MySQL 8.0
Vorwort Die neueste Version von MySQL 8.0 ist 8.0...
JavaScript realisiert den Drag-Effekt der Modalbox
Hier ist ein Fall des Ziehens einer modalen Box. ...
So implementieren Sie die Vorschaufunktion zum Wechseln von Bildern mithilfe der Größenänderung
Wichtige Punkte Mit der CSS-Eigenschaft „Größe än...
CSS-Methode zum Löschen von Float und BFC
BFC BFC: Blockformatierungskontext BFC-Layoutrege...
Detaillierte Erläuterung der Verwendung von MySQL-Profilen zur Analyse von langsamem SQL (Group Left Join ist effizienter als Unterabfrage)
Verwenden Sie ein Profil, um langsames SQL zu ana...