HTML-Dropdown Menü erstellen: So geht's (inkl. Beispiele)

Schritt 3: Erstellen Sie Optionselemente und platzieren Sie sie im „select“-Element

Fügen Sie schließlich -Tags zwischen den Start- und End-Tags des „select“-Elements ein. Fügen Sie dem Dropdown-Menü so viele Optionen hinzu, wie Sie anbieten möchten. Fügen Sie dann ein value-Attribut in jedes -Start-Tag ein und stellen Sie es auf den Optionsnamen ein. Hier sind vier Beispiele:

 

Rigatoni
Dave
Pumpernickel
Reeses

Und so sieht das Ergebnis aus:

Siehe das Pen-Beispiel Nur HTML-Dropdown von HubSpot (@hubspot) auf CodePen.

Probieren Sie es jetzt selbst einmal aus. Das oben stehende Code-Modul ist editierbar. Wechseln Sie zwischen den HTML- und CSS-Registerkarten, bearbeiten Sie den Code und klicken Sie unten rechts auf „Erneut ausführen“.

Standardwert des HTML-Dropdown-Menüs

Wenn Sie auf diese Weise ein Dropdown-Menü erstellen, wird die erste im HTML-Code aufgeführte Option zum Standardwert des Dropdown-Menüs, wie Sie im obigen Beispiel sehen können.

Um den Standardwert zu ändern, verwenden Sie das boolesche Attribut selected. Fügen Sie es einfach in das Start-Tag des -Tags ein, das als Standard angezeigt werden soll – und zwar nach dem Attribut value.

Im folgenden Beispiel sehen Sie ein Dropdown-Menü für Abonnementoptionen. Die Optionen umfassen zwar auch ein Gratis- und ein Bronze-Abonnement, mithilfe des booleschen Attributs wird allerdings Silber als Standardwert festgelegt.

Siehe das Pen-Beispiel Nur HTML-Dropdown mit booleschem Attribut von HubSpot (@hubspot) auf CodePen.

Probieren Sie es jetzt selbst einmal aus. Das oben stehende Code-Modul ist editierbar. Wechseln Sie zwischen den HTML- und CSS-Registerkarten, bearbeiten Sie den Code und klicken Sie unten rechts auf „Erneut ausführen“.

So erstellen Sie ein Dropdown-Menü mit Hover-Effekt

Wenn ein Dropdown-Menü angezeigt werden soll, wenn Benutzende den Mauszeiger über ein Element bewegen, müssen Sie HTML und CSS verwenden. Im Folgenden werden wir den Prozess im Detail erläutern.

Schritt 1: Erstellen und gestalten Sie ein div-Tag mit dem Klassennamen „dropdown“

Erstellen Sie zunächst ein div-Tag und fügen Sie ihm die Klasse dropdown hinzu. Stellen Sie in CSS die Anzeige dieses divs auf inline-block und die Position auf relative ein. Dadurch wird der Content des Dropdown-Menüs direkt unter der Dropdown-Schaltfläche angezeigt.

So sieht das in HTML aus:

So sieht das in CSS aus:

 

.dropdown {
     display: inline-block;
     position: relative;
     }

Schritt 2: Erstellen Sie das Element mit Hover-Effekt

Als Nächstes erstellen Sie ein Element, das das Dropdown-Menü einblendet, wenn Benutzende den Mauszeiger darüber bewegen. In diesem Beispiel erstellen wir eine Schaltfläche. Platzieren Sie die Schaltfläche innerhalb des div-Elements.

So sieht der HTML-Code bisher aus:

 


      HubSpot-Ressourcen

Schritt 3: Erstellen und gestalten Sie den Dropdown-Content

Nun ist es an der Zeit, den eigentlichen Dropdown-Content zu erstellen, der ausgeblendet wird, bis Benutzende den Mauszeiger über die Schaltfläche bewegen. Im folgenden Beispiel werden wir drei Links in das Dropdown-Menü aufnehmen. Jeder der Links wird in ein div-Element mit dem Klassennamen dropdown-content eingeschlossen.

Hier ist der HTML-Code für den Content des Dropdown-Menüs:

 


     Blog
     Academy
     YouTube

Stellen Sie in CSS die Anzeige dieses div-Elements auf none, seine Position auf absolute und seine Breite auf 100 % ein. Dadurch wird sichergestellt, dass der Inhalt des Dropdown-Menüs direkt unter der Dropdown-Schaltfläche erscheint und gleich breit ist wie die Schaltfläche. Stellen Sie außerdem die Eigenschaft „overflow“ auf auto ein, um das Scrollen auf kleinen Bildschirmen zu ermöglichen. Schließlich wird die Eigenschaft box-shadow definiert, um den Content des Dropdown-Menüs vom Hintergrund abzuheben.

So sieht das in CSS aus:

 

.dropdown-content {
     display: none;
     position: absolute;
     width: 100%;
     overflow: auto;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

Schritt 4: Legen Sie den Hover-Effekt des Dropdown-Menüs fest

Um sicherzustellen, dass der Content des Dropdown-Menüs beim Darüberbewegen des Mauszeigers tatsächlich angezeigt wird, müssen Sie die Display-Eigenschaft des divs mit der Pseudoklasse :hover angeben. Damit wird ein spezieller Status des Elements definiert – in diesem Fall die Darstellungsweise, wenn Benutzende den Mauszeiger darüber bewegen.

So sieht das in CSS aus:

 

.dropdown:hover .dropdown-content {
     display: block;
}

Schritt 5: Gestalten Sie die Links im Dropdown-Menü

Ohne Styling wären die Links innerhalb des Dropdown-Menüs hellblau, unterstrichen und würden ohne Abstand dargestellt. Für ein ansprechenderes Erscheinungsbild stellen wir die Schriftfarbe auf black, den Abstand auf 5px und die Eigenschaft text-decoration auf none ein.

So sieht das in CSS aus:

 

.dropdown-content a {
     display: block;
     color: #000000;
     padding: 5px;
     text-decoration: none;
}

Schritt 6: Ändern Sie die Farbe der Dropdown-Links beim Darüberbewegen des Mauszeigers

Mit der Pseudoklasse :hover können Sie die Links auch so gestalten, dass sich ihre Darstellung beim Darüberbewegen des Mauszeigers ändert. Nehmen wir an, dass der Text und die Hintergrundfarbe eines Links geändert werden sollen, wenn Benutzende den Mauszeiger darüber bewegen.

So sieht das in CSS aus:

 

.dropdown-content a:hover {
     color: #FFFFFF;
     background-color: #00A4BD;
}

Unten sehen Sie den vollständigen Code und das Ergebnis:

Siehe das Pen-Beispiel Dropdown-Menü mit Hover-Effekt mit Links von HubSpot (@hubspot) auf CodePen.

Probieren Sie es jetzt selbst einmal aus. Das oben stehende Code-Modul ist editierbar. Wechseln Sie zwischen den HTML- und CSS-Registerkarten, bearbeiten Sie den Code und klicken Sie unten rechts auf „Erneut ausführen“.

Dropdown-Menü mit Mehrfachauswahl

In den oben stehenden Beispielen konnten die Benutzenden nur eine Option aus dem Dropdown-Menü auswählen. Sie können jedoch auch ein Menü erstellen, das Benutzenden mehrere Auswahlmöglichkeiten bietet. Dies ist ein Dropdown-Menü mit Mehrfachauswahl.

Um ein Dropdown-Menü mit Mehrfachauswahl zu erstellen, benötigen Sie HTML, CSS und JavaScript. Hier ist ein Beispiel, das der Spiele- und App-Entwickler Charlie Walter erstellt hat. Wie Sie sehen, verwendet er ein Formularelement.

Siehe das Pen-Beispiel Mehrfachauswahl (Dropdown) von Charlie Walter (@cjonasw) auf CodePen.

Probieren Sie es jetzt selbst einmal aus. Das oben stehende Code-Modul ist editierbar. Wechseln Sie zwischen den HTML- und CSS-Registerkarten, bearbeiten Sie den Code und klicken Sie unten rechts auf „Erneut ausführen“.

HTML-Dropdown-Menü in der Navigationsleiste

Wenn Sie ein Dropdown-Menü zu Ihrer Navigationsleiste hinzufügen möchten, sehen die Schritte etwas anders aus. Aber mit einigen grundlegenden HTML- und CSS-Kenntnissen können Sie es leicht implementieren.

1. Suchen oder erstellen Sie das

Suchen Sie zunächst das