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
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.
Schritt 2. Geben Sie den Belegkopf ein
Dies ist der Code, der den für den Rest des Dokuments verwendeten Codetyp bestimmt:
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):
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
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:
Schritt 12. Überprüfen Sie den Code Ihres Dropdown-Felds
Ihr Code sollte wie folgt aussehen:
Google Facebook Youtube
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.