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

Bei der Erstellung von Webseiten haben Sie nur begrenzten Platz für die Darstellung Ihres gesamten Contents. Um diesen Platz optimal zu nutzen, können Sie Dropdown-Menüs verwenden. In diesem Beitrag zeigen wir Ihnen, wie Sie mit HTML ein Dropdown-Menü erstellen, das Sie in Ihre Website-Designs einfügen können.

Was ist ein HTML-Dropdown-Menü?

Ein Dropdown-Menü ist eine Auflistung von Optionen, die nur angezeigt wird, wenn Benutzende darauf klicken oder den Mauszeiger darüber bewegen. Die Menüoptionen werden vertikal nach unten aufgeklappt und verschwinden nach dem Verlassen des Menüs wieder.

Dropdown-Menüs bieten die Möglichkeit, mehr Content und Links auf einer Seite zu platzieren, ohne sie zu überladen. Daher werden sie oft auf Websites und in Web-Apps verwendet, um Elemente auszublenden, die die Benutzenden nach dem ersten Laden der Seite nicht mehr sehen müssen, die sie aber eventuell dennoch verwenden möchten.

Häufige Anwendungsfälle für HTML-Dropdown-Menüs sind:

• Navigationsmenüs, die Links auf andere Seiten einer Website enthalten
• Webformulare (einschließlich nach dem Mobile-First-Prinzip entworfene Bootstrap-Formulare), die Optionen enthalten, aus denen Benutzende wählen können
• Website-Suchen zur Auflistung von Sortier- oder Filteroptionen für eine Abfrage
• als platzsparende Alternative zu Radiobuttons
• Auflistung zusätzlicher, weniger gebräuchlicher Aktionen, die Benutzende in einer App durchführen können – hier ist ein Beispiel aus dem Blog-Tool von HubSpot:

Dropdown-Menüs bestehen aus mehreren beweglichen Teilen, die zusammenarbeiten müssen, um ein nahtloses Benutzererlebnis zu gewährleisten. Dropdown-Menüs, die nicht wie erwartet funktionieren, werden von Benutzenden als sehr negativ wahrgenommen. Deshalb ist es so wichtig, sie korrekt in HTML zu implementieren.

Code des HTML-Dropdown-Menüs

Wie sieht ein vollständiges Dropdown-Menü aus? Hier ist ein Beispiel für den grundlegenden Code eines HTML-Dropdown-Menüs. Im Folgenden wird die Syntax im Detail erläutert.

 

<label for="dog-names">Wählen Sie einen Hundenamen:</label>
     <select name="dog-names" id="dog-names">>
          <option value="rigatoni">Rigatoni</option>
          <option value="dave">Dave</option>
          <option value="pumpernickel">Pumpernickel</option>
          <option value="reeses">Reeses</option>
     </select>>

Syntax des HTML-Dropdown-Menüs

Um zu verstehen, wie Dropdown-Menüs in HTML funktionieren, müssen Sie drei Elemente kennen: label, select und option. Sehen wir uns jedes dieser Tags genauer an.

label

Mit dem <label>-Tag wird ein Label für ein Menü oder eine andere Benutzereingabe auf der Seite erstellt. Um das Label mit einem Dropdown-Menü zu verbinden, wird das Attribut for verwendet, das seinen Wert mit dem id-Attribut des folgenden <select>-Tags teilt.

Wenn ein <label>-Tag auf diese Weise mit einem <select>-Tag verknüpft ist, wird beim Anklicken des „label“-Elements automatisch der Fokus auf das Auswahlelement gelenkt.

select

Das <select>-Element erstellt das Dropdown-Menü. Es enthält zwei Attribute: name und id. Das Attribut id sollte die gleichen Werte haben wie das Attribut for im <label>-Tag. Das Attribut name wird verwendet, um das Dropdown-Menü zu identifizieren, wenn die Auswahl in einem Formular übermittelt wird.

Das <select>-Tag kann auch mehrere optionale Attribute enthalten. Diese sind:

• autofocus: Legt fest, dass der Fokus beim Laden der Seite auf die Eingabe im Dropdown-Menü gelegt wird (d. h. es wird vom Browser ausgewählt und kann über die Tastatur gesteuert werden)
• disabled: Deaktiviert das Dropdown-Menü
• multiple: Ermöglicht die Auswahl mehrerer Optionen
• required: Legt in einem Formular fest, dass das Formular ausgefüllt werden muss, um es abschicken zu können
• size: Legt die Anzahl der Optionen fest, die im Dropdown-Menü angezeigt werden

option

<select> enthält ein oder mehrere verschachtelte <option>-Tags. Jedes <option>-Tag steht für einen Menüeintrag. Das Start-Tag sollte das Attribut value enthalten, das einen Wert festlegt, der übermittelt wird, wenn dieser Menüeintrag ausgewählt wird.

Sie können auch die optionalen Attribute disabled (Option im Menü wird deaktiviert) oder selected (Option wird beim Laden der Seite automatisch ausgewählt) verwenden.

Mit dem <select>-Element kann in HTML ganz einfach ein grundlegendes Dropdown-Menü erstellt werden. Sehen wir uns jeden Schritt dieses Prozesses im Folgenden genauer an.

Schritt 1: Erstellen Sie ein „label“-Element

Fügen Sie zunächst ein <label>-Element in Ihr HTML-Dokument ein. Fügen Sie im Start-Tag ein for-Attribut mit einem Kurznamen für das Dropdown-Menü hinzu. Falls das Dropdown-Menü beispielsweise eine Liste von Hundenamen enthält, könnten Sie als Attribut Hundenamen wählen. So könnte Ihr HTML aussehen:

 

<label for="dog-names">Wählen Sie einen Hundenamen:</label>

Schritt 2: Erstellen Sie ein „select“-Element

Fügen Sie anschließend ein <select>-Element nach dem <label>-Element ein. Fügen Sie im Start-Tag ein name- und ein id-Attribut ein. Wählen Sie für das id-Attribut denselben Wert wie für das for-Attribut im <label>-Tag und wählen Sie für das name-Attribut einen Wert zur Identifizierung des Menüs bei der Formularübermittlung aus (das kann derselbe Wert wie der id-Wert sein).

In diesem Beispiel legen wir für die Attribute name und id Hunde fest. So sieht das in HTML aus:

 

<select name="dog-names" id="dog-names"></select>

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

Fügen Sie schließlich <option>-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 <option>-Start-Tag ein und stellen Sie es auf den Optionsnamen ein. Hier sind vier Beispiele:

 

<option value="rigatoni">Rigatoni</option>
<option value="dave">Dave</option>
<option value="pumpernickel">Pumpernickel</option>
<option value="reeses">Reeses</option>

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 <option>-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:

 

<div class="dropdown"></div>

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:

 

<div class="dropdown">
      <button>HubSpot-Ressourcen</button>
</div>

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:

 

<div class="dropdown-content">
     <a rel="noopener" target="_blank" href="https://blog.hubspot.com/">Blog</a>
     <a rel="noopener" target="_blank" href="https://academy.hubspot.com/">Academy</a>
     <a rel="noopener" target="_blank" href="https://www.youtube.com/user/hubspot">YouTube</a>
</div>

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 <nav>-Element in Ihrem HTML-Code

Suchen Sie zunächst das <nav>-Tag in Ihrem HTML-Dokument oder erstellen Sie dieses. Dies ist Ihre Navigationsleiste, in die Sie Ihr Dropdown-Menü einfügen werden.

Wir empfehlen, eine CSS-Klasse zu Ihrem Nav-Element hinzuzufügen, damit Sie es mit CSS gestalten können. In diesem Beispiel verwenden wir die Klasse „navbar“, d. h. <nav class="navbar">.

2. Fügen Sie eine ungeordnete Liste zu Ihrer Navigationsleiste hinzu

In früheren Tutorials haben wir das <select>-Element verwendet, um ein Dropdown-Menü zu erstellen. Sie können diese Methode zwar mit etwas Tüfteln auch in Ihrer Navigationsleiste verwenden, es ist aber viel einfacher und schneller, ein Dropdown-Menü mit einer ungeordneten Liste oder einem <ul>-Element zu erstellen.

Die ungeordnete Liste wird später zu einer Liste von Links, die Ihre Benutzenden anklicken können. Hier ist der grundlegende HTML-Code, der sich innerhalb der Navigation befindet.

Siehe das Pen-Beispiel Dropdown-Menü in der Navigationsleiste Ungeordnete Liste von HubSpot (@hubspot) auf CodePen.

3. Fügen Sie Ihrer Navigationsleiste ein einfaches CSS-Styling hinzu

Als Nächstes wollen wir die Navigationsleiste mit CSS gestalten. Wenn Ihre Website bereits über eine Navigationsleiste verfügt oder Sie ein bereits bestehendes Design verwenden, wurde dies vorab für Sie erledigt.

Wenn nicht, setzen wir die Eigenschaft background-color auf #333, die Eigenschaft position auf relative und die Eigenschaft z-index auf 999, damit unsere Navigationsleiste über jedem anderen Element erscheint und nicht verdeckt wird.

So sieht der CSS-Code aus:

Siehe das Pen-Beispiel Dropdown-Menü Navigationsleiste CSS von HubSpot (@hubspot) auf CodePen.

4. Fügen Sie Ihrer ungeordneten Liste ein CSS-Styling hinzu

Zur Erinnerung: Die unsortierte Liste wird zu Ihrem Dropdown-Menü. Aber wir wollen es so gestalten, dass es auch erscheint, wenn Benutzende den Mauszeiger darüberbewegen.

Im folgenden CSS geben wir an, dass wir die ungeordnete Liste in der Navigationsleiste designen, indem wir die Klasse im Selektor angeben. Das heißt: .navbar ul (die ungeordnete Liste Ihres Menüs), .navbar li (die ungeordneten Listenelemente Ihres Menüs) und .navbar li a (die Links zu den Listenelementen Ihres Menüs, die durch den Selektor a gekennzeichnet sind). Auf diese Weise gilt das Design, das Sie hier festgelegt haben, nicht für alle ungeordneten Listen oder Links auf Ihrer Website.

Stellen Sie zunächst im Selektor .navbar ul die Eigenschaft list-style-type auf none ein. So wird sichergestellt, dass keine Aufzählungspunkte oder Gedankenstriche vor den Listenelementen stehen. Stellen Sie dann margin und padding auf 0 ein. Sie können diese Zahlen aber nach Belieben anpassen.

Siehe das Pen-Beispiel Dropdown-Menü Ungeordnete Liste CSS von HubSpot (@hubspot) auf CodePen.

Stellen Sie dann im Selektor .navbar li die Eigenschaft display auf inline-block ein. Auf diese Weise wird sichergestellt, dass Ihre Dropdown-Menüelemente untereinander angezeigt werden und dass sie sich weder gegenseitig noch andere Elemente auf der Seite unterbrechen.

Siehe das Pen-Beispiel Dropdown-Menü Ungeordnete Liste CSS – navbar li von HubSpot (@hubspot) auf CodePen.

Schließlich können Sie den Selektor .navbar li a so einstellen, dass er das Aussehen Ihrer Links ändert. Sie können die Schriftfarbe, den Abstand und die Textdekoration anpassen, stellen Sie jedoch sicher, dass die display-Eigenschaft auf block eingestellt ist. Auf diese Weise nimmt der Link die gesamte Breite des Dropdown-Menüs ein und deckt nicht nur den Text selbst ab. 

Siehe das Pen-Beispiel Dropdown-Menü Ungeordnete Liste CSS – navbar li a von HubSpot (@hubspot) auf CodePen.

5. Gestalten Sie das Dropdown-Menü mit CSS

Schließlich ist es an der Zeit, Ihr brandneues Dropdown-Menü so einzurichten, dass es beim Darüberbewegen des Mauszeigers angezeigt wird und nicht mehr statisch auf der Seite erscheint, wie es bei einer normalen ungeordneten Liste der Fall wäre.

Dazu gestalten wir zuerst den Selektor .navbar ul ul. Stellen Sie die Eigenschaft position auf absolute ein, damit das Menü abhängig von seinem übergeordneten Element (der Navigationsleiste) bleibt.

Stellen Sie dann die Eigenschaft display auf none ein, damit das Dropdown-Menü standardmäßig ausgeblendet ist und nur angezeigt wird, wenn Benutzende den Mauszeiger darüber bewegen.

Siehe das Pen-Beispiel Dropdown-Menü CSS – navbar ul ul von HubSpot (@hubspot) auf CodePen.

Als Nächstes designen wir die Selektoren .navbar ul ul li und .navbar li:hover ul, die beide auf die Listenelemente in Ihrem Dropdown-Menü verweisen. Stellen Sie für beide die Eigenschaft display auf block ein, damit sie übereinander erscheinen.

Siehe das Pen-Beispiel Dropdown-Menü CSS – navbar ul ul li von HubSpot (@hubspot) auf CodePen.

Zum Schluss wollen wir noch die Hintergrundfarbe der Dropdown-Links beim Darüberbewegen des Mauszeigers ändern. Verwenden Sie den CSS-Selektor .navbar ul li a:hover und ersetzen Sie die Eigenschaft background-color durch den HTML-Farbcode Ihrer Wahl.

Siehe das Pen-Beispiel Dropdown-Menü CSS – navbar ul ul li hover von HubSpot (@hubspot) auf CodePen.

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

Siehe das Pen-Beispiel HTML-Dropdown-Menü in der Navigationsleiste 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“.

Barrierefreiheit des HTML-Dropdown-Menüs

Es gibt einen weiteren Aspekt Ihrer Dropdown-Menüs, den wir noch nicht erwähnt haben, der aber unbedingt zu beachten ist: Barrierefreiheit. Barrierefreiheit im Web ist der Grundsatz, dass alle Online-Erlebnisse für jedermann nutzbar sein sollten – unter besonderer Berücksichtigung von Benutzenden mit körperlichen, visuellen und kognitiven Einschränkungen.

Dropdown-Menüs müssen barrierefrei sein, damit diese Benutzenden Ihre Website durchsuchen, Formulare übermitteln und andere Aktionen genau wie jeder andere durchführen können. Ansonsten brauchen sie möglicherweise länger, um das Gewünschte zu finden, oder können bestimmte Teile Ihrer Website gar nicht nutzen.

Wenn Sie ein Dropdown-Menü in HTML entwerfen, sollten Sie einige bewährte Verfahren für die Barrierefreiheit beachten:

• Verwenden Sie nicht zu viele Ebenen in Ihrem Dropdown-Menü, da dies die Navigation für Benutzende mit motorischen Problemen erschwert. Wenn Ihr Menü mehr als eine Untermenü-Ebene enthält (d. h. ein Menü innerhalb eines Menüs innerhalb Ihres Hauptmenüs), sollten Sie Ihr Menü bzw. Ihre Website wahrscheinlich umstrukturieren.
• Alle Menüs auf Ihrer Seite, einschließlich der Dropdown-Menüs, müssen mit der Tabulatortaste und der Eingabetaste navigierbar sein. Mit der Tabulatortaste bewegen Sie sich vorwärts durch die Menüpunkte und mit der Eingabetaste öffnen bzw. schließen Sie das Menü.
• Vermeiden Sie Tastaturfallen. Diese treten auf, wenn Benutzende zwar durch die Elemente eines Menüs mit der Tabulatortaste navigieren können, das Menü aber nicht schließen können und somit stecken bleiben.
• Richten Sie bei Menüs, die mit dem Mauszeiger aktiviert werden, eine Zeitverzögerung (etwa eine Sekunde) zwischen dem Entfernen des Mauszeigers vom Menü und dem Schließen des Menüs ein. So können Benutzende mit eingeschränkter Feinmotorik das Menü auch dann verwenden, falls sie den Mauszeiger versehentlich verschieben.
• Die Verwendung von semantischem HTML macht Ihren Code nicht nur leichter verständlich, sondern Ihre Menüs auch für Bildschirmleseprogramme zugänglich.

Fazit: Erstellen Sie einfach Dropdown-Menüs in HTML

Schon mit wenigen HTML- und CSS-Kenntnissen können Sie einfache, intuitive und visuell ansprechende Dropdown-Menüs für Ihre Website zu erstellen. Sie können Ihr Dropdown-Menü so einrichten, dass es bei einem Klick oder dem Darüberbewegen des Mauszeigers geöffnet wird – so sparen Sie ohne hohe Interaktionskosten wertvollen Platz. Deshalb sind Dropdown-Menüs nach wie vor ein wichtiger Bestandteil jeder Website.

Titelbild: dima_sidelnikov / iStock / Getty Images Plus