So erstellen Sie ein Dropdown-Menü in HTML und CSS (mit Bildern)

Inhaltsverzeichnis:

So erstellen Sie ein Dropdown-Menü in HTML und CSS (mit Bildern)
So erstellen Sie ein Dropdown-Menü in HTML und CSS (mit Bildern)
Anonim

In diesem wikiHow zeigen wir dir, wie du mithilfe von HTML- und CSS-Codierung ein Dropdown-Menü für deine Website erstellst. Das Dropdown-Menü wird angezeigt, wenn jemand mit der Maus über seine Schaltfläche fährt; Sobald das Dropdown-Menü erscheint, kann der Benutzer auf eine der darin enthaltenen Optionen klicken, um die Webseite der Option zu besuchen.

Schritte

3234689 1

Schritt 1. Öffnen Sie Ihren HTML-Texteditor

Sie können einen einfachen Texteditor wie Notepad oder TextEdit oder einen fortgeschritteneren Texteditor wie Notepad++ verwenden.

  • Wenn Sie sich entscheiden, Notepad++ zu verwenden, stellen Sie sicher, dass Sie auswählen HTML aus dem "H"-Abschnitt der Sprache Menü oben im Fenster, bevor Sie fortfahren.
3234689 2

Schritt 2. Geben Sie den Belegkopf ein

Dies ist der Code, der den für den Rest des Dokuments verwendeten Codetyp bestimmt:

    
3234689 9

Schritt 9. Erstellen Sie den Namen der Dropdown-Schaltfläche

Geben Sie den folgenden Code ein und stellen Sie sicher, dass Sie "Name" durch den Namen der Dropdown-Schaltfläche ersetzen (z. B. Speisekarte):


3234689 10

Schritt 10. Fügen Sie die Links Ihres Dropdown-Menüs hinzu

Jedes der Elemente im Dropdown-Menü sollte auf etwas verweisen, sei es eine Seite auf Ihrer Website oder eine externe Website. Sie können dem Dropdown-Menü Elemente hinzufügen, indem Sie den folgenden Code eingeben. Stellen Sie dabei sicher, dass Sie https://www.website.com durch die Adresse des Links ersetzen (behalten Sie die Anführungszeichen bei) und "Name" durch den Namen des Links.

Name Name Name

3234689 11

Schritt 11. Schließen Sie Ihr Dokument

Geben Sie die folgenden Tags ein, um das Dokument zu schließen und das Ende des Codes des Dropdown-Menüs anzugeben:


3234689 12

Schritt 12. Überprüfen Sie den Code Ihres Dropdown-Felds

Ihr Code sollte wie folgt aussehen:

     

Tipps

  • Testen Sie Ihren Code immer, bevor Sie ihn auf Ihrer Website veröffentlichen.
  • Die obigen Anweisungen gelten für ein Dropdown-Menü, das aktiviert wird, wenn Sie den Mauszeiger über die Schaltfläche des Dropdown-Menüs bewegen. Wenn Sie ein Dropdown-Menü erstellen möchten, das nur beim Klicken angezeigt wird, müssen Sie JavaScript verwenden.

Beliebt nach Thema