Beispielcode zum Erstellen eines Dropdown-Menüs mit reinem CSS

Beispielcode zum Erstellen eines Dropdown-Menüs mit reinem CSS

Einführung:
Als ich mir in letzter Zeit die Fragen für Vorstellungsgespräche ansah, sah ich oft, dass zur Implementierung eines Dropdown-Menüs CSS verwendet wurde. Allerdings stellte ich fest, dass viele Leute dazu nicht in der Lage waren und es schließlich nur widerwillig mit JS bewerkstelligen konnten . Ehrlich gesagt bin ich schockiert. Diese Funktion ist sehr einfach zu implementieren und man kann sogar sagen, dass es sich um eine Einstiegsfrage handelt. Warum wissen so viele Leute nicht, wie das geht? Deshalb gebe ich Ihnen heute einige Tipps für Vorstellungsgespräche und zeige Ihnen, wie Sie mit CSS ein Dropdown-Menü erstellen.

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)

Bildbeschreibung hier einfügen

2. Nach dem Klicken oder Zeigen mit der Maus.

Nach dem Klicken auf das Telefon
Mauszeiger zurück

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.

Bildbeschreibung hier einfügen

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

Beispielanalyse der Listen-Direktive in Nginx

Handlungsüberblick Im vorherigen Artikel haben wi...

In Linux gibt es keinen Make-Befehl (make: *** Kein Ziel angegeben und keine Makefile- oder Make-Befehlsinstallationsmethode gefunden)

Beachten! ! ! Diese Situation kann bei der Instal...

Einführung in die Verwendung und den Unterschied zwischen „in“ und „exists“ in MySQL

Geben Sie zunächst einen Code ein für(int i=0;i&l...

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

So legen Sie die Position des Blockelements in de...

Centos7-Installation des in Nginx integrierten Lua-Beispielcodes

Vorwort Der von mir verwendete Computer ist ein M...

Beispielcode zur Implementierung eines Musikplayers mit nativem JS

Dieser Artikel stellt hauptsächlich den Beispielc...

Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli

vue-cli verwendet stimulsoft.reports.js (Tutorial...

Übersicht über die Unterschiede zwischen Linux TTY/PTS

Wenn wir einen Buchstaben auf der Tastatur eingeb...

So verwenden Sie Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung)

Hintergrund Wir verwenden Chrome Dev Tools häufig...

Detaillierte Vorgänge zum Erstellen des gemeinsamen Clusters und des Spiegelclusters von RabbitMq mit Docker

Inhaltsverzeichnis 1. Erstellen Sie die Betriebsu...

Funktionsprinzip und Implementierungsmethode der Vue-Anweisung

Einführung in Vue Die aktuelle Ära der großen Fro...

Aktivierungscode und KMS-Installationsschlüssel für Windows Server 2019 (Volume License Edition, GVLK)

Ich habe vor, die internen Dokumente des Unterneh...

Detaillierte Erklärung zu MySQL und Springs Autocommit

1 MySQL Autocommit-Einstellungen MySQL führt stan...

Tipps zur Optimierung von MySQL SQL-Anweisungen

Wenn wir mit einer SQL-Anweisung konfrontiert wer...

Docker5 - Vollfunktionaler Hafenlager-Bauprozess

Harbor ist ein Registry-Server auf Unternehmenseb...