CSS Dropdown Menüs erstellen mit HTML und CSS

In diesem CSS Tutorial zum Programmieren lernen geht es um die Erstellung von animierten CSS Dropdown Menüs aus ul- und li-Tags in HTML.Tags: | | | | | | | | | | | |
Noch nicht sicher genug im Webdesign? Lass dir in unseren Programmier-Kursen in Kirchdorf oder unserer Wichtel-Webdesign-Agentur in Pettenbach weiterhelfen!

Worum geht´s?

In diesem CSS Tutorial lernen wir, wie man mit Hilfe von <ul>- und <li>-Tags und einigen wenigen CSS-Befehlen Dropdown-Menüs erstellt.

Beginnen wir mit dem HTML-Code für unser Beispiel:

1. CSS Dropdown Menüs erstellen: Der HTML Part

Auf fast allen Websites basieren Menüs (und auch Dropdown-Menüs) auf ungeordneten Listen, also den <ul>-Tags und <li>-Tags.

Wollen mehr als eine Ebene in unseren Menüs haben, so müssen wir diese Listen entsprechend verschachteln.

Das bedeutet, dass sich – wie im folgenden Beispiel – eine ungeordnete Liste innerhalb des <li>-Tags einer übergeordneten ungeordneten Liste befindet:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="menu">
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3
                    <ul>
                        <li>Unteritem 1</li>
                        <li>Unteritem 2</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

Unser Aufzählungspunkt „Item 3“ in unserer Liste hat eine Unter-Liste, die wiederum zwei Aufzählungspunkte hat.

Das Ganze sieht dann in etwa so aus:

CSS Dropdown Menüs Schritt 1

Das war es auch schon mit dem HTML-Teil unserer Dropdown-Menüs.

Alles, was jetzt noch kommt, ist der Magie von CSS zuzuschreiben.

2. CSS Dropdown Menüs erstellen: Der CSS Part

Wir könnten gleich als nächstes daran gehen, die Unterliste verschwinden zu lassen, so dass sie nur beim darüberfahren mit der Maus sichtbar ist.

Aber das ist nicht sehr sinnvoll, weil wir dann Änderungen im Styling der Unterliste nicht sofort sichtbar sind, was das Designen mühsam macht.

Stattdessen kümmern wir uns erstmal um das Aussehen unserer Listen.

2.1 Aufzählungspunkte und Abstände von unseren CSS Dropdown Menüs entfernen

<ul>-Listen bzw. <ol>-Listen haben standardmäßig einige Voreinstellungen:

  • Es gibt Aufzählungspunkte oder 1., 2., 3. oder a), b), c) vor den einzelnen Items
  • Die Liste hat oben und unten einen voreingestellten margin
  • Die Liste hat links eine voreingestelltes padding

Um diese Hindernisse kümmern wir uns als erstes in unserer style.css:

#menu ul {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

Nun sind die Punkte und Abstände entfernt:

CSS Dropdown Menüs Schritt 2: Punkte von der Liste entfernen

Als nächstes werden wir dafür sorgen, dass unsere Menü-Links nebeneinander dargestellt werden.

2.2 Die Menü-Punkte nebeneinander anzeigen mit der CSS Flexbox

(Wenn du die die CSS Flexbox noch nicht gelernt hast, kannst du deinen <li>-Items auch mit display: inline-block; sagen, dass sie nebeneinander sein sollen. Aber einfacher ist das Ganze mit CSS Flexboxen – hier lernst du, wie diese funktionieren.)

Um unsere Menü-Items nebeneinander darzustellen, reicht ein einziger zusätzlicher Befehl schon aus, nämlich display: flex; – aber wir kümmern uns gleich um mehrere Dinge auf einmal:

  • Item 1, Item 2 und Item 3 sollen nebeneinander stehen
  • Sie sollen einen Abstand dazwischen haben
  • Die Unter-Liste soll vertikal (von oben nach unten) ausgerichtet sein
  • Zwischen den Items der Unter-Liste soll ebenso ein Abstand sein

All das erreichen wir mit nur wenigen Befehlen, wenn wir unsere CSS Flexbox benutzen:

#menu ul {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  column-gap: 40px;
}
#menu ul li ul {
  flex-direction: column;
  row-gap: 20px;
}

Der CSS-Befehl display: flex ändert die Liste in eine CSS Flexbox um, und ordnet die Items standardmäßig nebeneinander an.

Der CSS-Befehl column-gap bzw. row-gap sorgt für die richtigen Abstände zwischen den einzelnen Items.

Und flex-direction: column sorgt dafür, dass Unter-Listen vertikal (von oben nach unten) angeordnet werden.

Das sieht doch schon fast wie ein Dropdown Menü aus:

CSS Dropdown Menü CSS Flexboxen einsetzen

Aber damit es auch wirklich gut aussieht, sorgen wir jetzt mal für ein schöneres Styling:

2.3 Unserem CSS Dropdown-Menü ein schönes Styling verpassen

Als nächstes kümmern wir uns um schönere Farben und Abstände.

  • Die Menü-Items werden vertikal zentriert
  • Jedes Item soll genug „Platz“ bekommen, um gut zu wirken
  • Jedes Item hat seine Hintergrund-Farbe
  • Wenn man mit der Maus darüber fährt, ändert sich die Farbe
  • Die Farbänderung ist animiert

Der folgende Code übernimmt all das:

#menu ul li {
  background-color: rgb(254, 255, 184);
  padding: 20px;
  transition: all 0.2s ease-in;
}
#menu ul li:hover {
  background-color:rgb(209, 186, 155);
}

Allerdings schafft er auch noch Probleme – durch die Flexboxen schiebt sich unser Item 3 nach oben, weil die Unter-Liste so viel Platz braucht. Außerdem ist uns unser column-gap von vorhin nun im Weg:

CSS Dropdown Menüs Farben und Abstände hinzufügen

Wir sollten also den column-gap abschaffen.

Aber wie schaffen wir es, dass unser Item 3 nicht mehr von der Unter-Liste verschoben wird?

Das Zauberwort dafür heißt position:

2.4 Die Unterlisten unabhängig von seinen Eltern machen mit position: absolute

In unserem CSS Tutorial zu Positionierung haben wir gelernt, dass position: absolute ein Element gewissermaßen „aus dem Fluss“ nimmt, so dass es andere HTML-Elemente nicht mehr verschiebt. Das ist genau die Eigenschaft, die wir hier brauchen 🙂

Allerdings reicht position: absolute alleine noch nicht aus – wir müssen die Position auch noch ein wenig mit den CSS-Befehlen left und top anpassen.

Außerdem müssen wir auch das Eltern-Element auf position: relative setzen. Tun wir das nicht, beziehen sich die CSS-Befehle left und top nicht auf das Eltern-Element, sondern auf das erste in der Hierarchie, das nicht position: static hat. Oder, falls es kein solches HTML-Element findet, auf das <body>-Element.

Außerdem setzen wir noch den CSS-Befehl white-space: nowrap – der verhindert, dass unsere Menü-Item-Bezeichnungen automatisch mit Zeilen-Umbrüchen versehen werden.

Hier der ganze CSS-Code dazu:

#menu ul {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}
#menu ul li ul {
  flex-direction: column;
  row-gap: 20px;
  position: absolute;
  left: 0px;
  top: 100%;
  white-space: nowrap;
}
#menu ul li {
  background-color: rgb(254, 255, 184);
  padding: 20px;
  transition: all 0.2s ease-in;
  position: relative;
}
#menu ul li:hover {
  background-color:rgb(209, 186, 155);
}

Es wird offensichtlich immer schöner:

CSS Dropdown Menüs Untermenü auf position absolute setzen

Als nächstes kannst du unseren row-gap noch entfernen, damit auch die Unter-Listen schön direkt untereinander sind.

Nun fehlt uns nur noch der eigentliche Anlass des ganzen Tutorials: die Dropdown-Funktion.

2.5 Unser CSS Dropdown Menü vollenden mit display: none oder visibility: visible

Es gibt hierbei einige verschiedene Methoden, wie wir unser Menü abschließend zu einem Dropdown-Menü machen können:

  • Mit display: none
  • Mit visibility: hidden und opacity: 0

2.5.1 Ein CSS Dropdown Menü mit display: none

Der erste Zugang ist ein weit verbreiteter Standard und funktioniert sehr einfach, nämlich so:

#menu ul {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}
#menu ul li ul {
  flex-direction: column;
  position: absolute;
  left: 0px;
  top: 100%;
  white-space: nowrap;
  display: none;
}
#menu ul li {
  background-color: rgb(254, 255, 184);
  padding: 20px;
  transition: all 0.2s ease-in;
  position: relative;
}
#menu ul li:hover {
  background-color:rgb(209, 186, 155);
}
#menu ul li:hover ul {
  display: flex;
}

Es werden beim CSS-Selektor #menu ul li ul der CSS-Befehl display: none hinzugefügt, und zusätzlich kommt der CSS-Selektor #menu ul li:hover ul hinzu, der die Liste dann wieder auf display: flex umstellt.

Das Ganze funktioniert grundsätzlich einwandfrei mit display: none – aber es gibt einen Nachteil: Die Unter-Menüs können so nicht „erscheinen“, also langsam auftauchen.

Wollen wir dies erreichen, brauchen wir stattdessen die CSS-Befehle visibility und opacity:

2.5.2 Ein CSS Dropdown Menü mit visibility: hidden und opacity: 0

Das Prinzip ist hierbei ähnlich wie vorher mit display: none, nur wird statt display: none eben visibility: hidden UND opacity: 0 eingestellt.

Wenn der Website-Besucher über ein Item fährt das eine Unter-Liste besitzt, so wird diese auf visibility: visible und opacity: 1 zurückgesetzt.

Außerdem müssen wir unsere <ul>-Elemente noch mit einer entsprechenden transition versehen:

#menu ul {
  list-style: none;
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}
#menu ul li ul {
  flex-direction: column;
  position: absolute;
  left: 0px;
  top: 100%;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in;
}
#menu ul li {
  background-color: rgb(254, 255, 184);
  padding: 20px;
  transition: all 0.2s ease-in;
  position: relative;
}
#menu ul li:hover {
  background-color:rgb(209, 186, 155);
}
#menu ul li:hover ul {
  visibility: visible;
  opacity: 1;
}

Es ist gar nicht so einfach, eine Animatino als Screenshot „einzufangen“, aber hier sieht man hoffentlich, dass es funktioniert hat:

CSS Dropdown Menüs animierte Übergänge erscheinende Transitions

Das wars von unserer Seite erstmals zu den Dropdown Menüs.

Natürlich kannst du hier noch viel abändern was Farben, Schriften, Effekte usw. betrifft, aber das Grundprinzip sollte nun klar sein.

Wenn du später PHP beherrscht und/oder Content Management Systeme wie z.B. WordPress verwendest, werden die dort in der Datenbank eingetragenen Menü-Items im Regelfall ebenso als <ul>- und <li>-Elemente ausgegeben.

Das Prinzip ist also universell einsetzbar.

3. CSS Dropdown Menüs: eine aussterbende Spezies?

Mit dem Siegeszug der mobilen Geräte wie Handys und Tablets stellt sich zu den Dropdown-Menüs eine nicht unerhebliche Frage: braucht man die denn noch?

Immerhin funktionieren Hover-Effekte auf Geräten, die vorranging direkt mit den Fingern bedient werden, etwas anders.

Dies ist der Grund, warum viele Entwickler mehr und mehr dazu übergehen, nicht mehr auf :hover zu reagieren, sondern auf Klicks, die z.B. eben Menüs sichtbar oder unsichtbar schalten.

Aber noch gibt es viele Websites, die Dropdown-Menüs nutzen, und das wird wohl auch noch eine ganze Weile so bleiben.

Was aber ganz allgemein gilt: nicht übertreiben mit den transitions – es kann auch nerven, wenn alles immer erst eine Weile dauert, bis es angezeigt wird oder wieder verschwindet.

So, und jetzt viel Freude mit deinen Dropdown-Menüs erstmal!

Diskussion zum Tutorial

Du bist aus Oberösterreich? Dann nütze doch auch unsere flexiblen Programmier-Kurse in Kirchdorf - oder gib deine Website gerne in die guten Hände unserer erfahrenen Wichtel-Webdesign-Agentur.