Responsive Navigation: CSS-only Dropdown-Menüs ohne JavaScript

Dank CSS lassen sich Dropdown-Menüs ganz ohne Einsatz von JavaScript anlegen und mit Hilfe von Media Queries responsiv gestalten. Das macht die Menüs auch auf mobilen Geräten mit entsprechenden Anpassungen einsatzfähig.

Die neue „Fluide Navigation“ auf drweb.de

Die Besonderheit bei der Fluid Navigation ist, dass die Menüpunkte, die auf schmalen Bildschirmen nicht mehr drauf passen, hinter einem Dropdown verschwinden, während die Haupt-Menüpunkte immer noch dezidiert vorhanden sind.

Wer unsere neue Dr. Web-Navigation mag, dem haben wir das HTML und CSS dazu als Demo im CodePen oben bereitgestellt. Das Template kommt im Übrigen von Tristan White. Das HTML zu unserer Navigation auf Dr. Web sieht so aus:

<nav id="menu">
  <ul id="menu-closed">
    <li><a href="/newsletter/">Newsletter</a></li>
    <li><a href="/seo/">SEO</a></li>
    <li><a href="/tools/">Tools</a></li>
    <li><a href="/websites/">Webseiten erstellen</a></li>
    <li><a href="/webdesign/">Webdesign</a></li>
    <li><a href="/websites/wordpress/">WordPress</a></li>
    <li><a href="#menu-closed"></a></li>
    <li><a href="#menu">&#9776; Menu</a></li>
  </ul>
</nav>

Und das dazugehörige CSS sieht zur Zeit wie folgt aus:

 nav#menu {
   font-size: 14px;
   background-color: #fff;
   box-shadow: 0 5px 20px #efefef;
   margin: 0;
   padding: 0 1em;
   position: relative;
   height: 60px;
   overflow: hidden;
}
 nav#menu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   max-height: 120px;
   position: relative;
}
 nav#menu ul li {
   display: inline-block;
}
 nav#menu ul li:last-child {
   position: absolute;
   right: 0;
   bottom: 45px;
   background-image: linear-gradient(to right, rgba(236, 240, 241, 0) 0, #fff 2em);
   padding-left: 3em;
}
 nav#menu ul li:nth-last-child(2) {
   display: none;
}
 nav#menu ul li a {
   display: inline-block;
   padding: 0 1em;
   color: #333;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-decoration: none;
   text-transform: uppercase;
   white-space: nowrap;
   line-height: 60px;
}
 nav#menu ul li a:hover {
   background-color: rgba(51, 51, 51, 0.08);
}
 nav#menu:target {
   height: auto;
   padding: 0;
}
 nav#menu:target ul {
   max-height: none;
}
 nav#menu:target ul li {
   display: block;
}
 nav#menu:target ul li:not(:first-child) {
   margin-top: 2px;
}
 nav#menu:target ul li:last-child {
   display: none;
}
 nav#menu:target ul li:nth-last-child(2) {
   display: inline-block;
   position: absolute;
   top: 0;
   right: 0;
   margin: 0;
   border-left: 2px solid #dde4e6;
}
 nav#menu:target ul li a {
   display: block;
   padding: 0 2em;
   background-color: rgba(51, 51, 51, 0.05);
}
 nav#menu:target ul li a:hover {
   background-color: rgba(51, 51, 51, 0.08);
}

Das Template dürfen Sie gerne auch bei Ihren eigenen Kunden einsetzen, es ist kostenlos und ohne Kennzeichnung verwendbar.

Responsive Mega Menu -- Navigation

Eine responsive Navigation mit eingebautem Suchfeld. Erstellt von Samir Alley.

Responsive Flexbox Dropdown Navigation

Eine Listen-basierte Navigation, gebaut mit Flexbox von Jeff Weese. Die Navigation enthält zwei Ebenen an Untermenüs.

Responsive Dropdown Navigation Bar

Eine Standard-Navigation mit Logo und Navigation auf einer Ebene. Kreiert von Tania Rascia.

Pure CSS DropDown Menu

Eine Navigation, die auf Mobile auf zwei Zeilen umbricht, statt hinter einem Dropdown zu verschwinden. Erschaffen von Andor Nagy.

Context Menü mit Feather icons

Håvard Brynjulfsen übersetzt eine Dribbble-Idee von Jakub Antalik mit ein wenig Hilfe der Open-Source-Symbolbibliothek Feather in HTML und CSS.

Animierte Responsive Navbar

Diese Web-App-Navigation ist voll einsatzfähig für das nächste Projekt. Auch das Erklär-Video lohnt sich anzusehen. Hier der Link zu Github und hier der direkte Download-Link.

Links zu den Navigations-Beispielen:

• Responsive Mega Menu
• Flexbox Dropdown Navigation
• Responsive Dropdown Navigation
• Pure CSS Dropdown Menu
• Fluid Navigation

Eine responsive Navigation selber bauen

Verschachtelte Liste als Basis

Die meisten Menüs werden als unsortierte Liste ausgezeichnet. Dank der Möglichkeit, Listen zu verschachteln, können auch Unterseiten problemlos und übersichtlich in die Navigation eingebunden werden.

<nav>
<ul>
  <li><a href="/">Start</a></li>
  <li><a href="#">Profil</a>
    <ul>
      <li><a href="/profil/team/">Team</a></li>
      <li>…</li>
    </ul>
  </li>
  <li>…</li>
</ul>
</nav>

Im Beispiel erstellen wir die Navigation mit „<ul>“- und „<li>“-Elementen – einschließlich verschachtelter Menüpunkte. Wer HTML5 einsetzt, platziert die Liste in der Regel innerhalb eines „<nav>“-Elementes, um sie auch semantisch als Navigation auszuzeichnen.

CSS für erste Menüebene

Im nächsten Schritt gestalten wir per CSS das Aussehen des Menüs. Die Menüpunkte der ersten Ebene sollen dabei nebeneinander angeordnet sein. Hierfür muss zunächst das Standardaussehen der Liste entfernt werden – also die Aufzählungspunkte und der dazugehörige Abstand.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Als nächstes ordnen wir die einzelnen Menüpunkte nebeneinander an.

nav > ul > li {
  float: left;
}

Die Verwendung des „>“-Selektors verhindert, dass Eigenschaften auf „<li>“-Elemente vererbt werden, die tiefer verschachtelt sind. Für das Menü sollen schließlich nur die Menüpunkte der ersten Ebene nebeneinander dargestellt werden. Alle verschachtelten Menüpunkte sollen untereinander angeordnet sein. Da zunächst nur die erste Ebene der Navigation sichtbar sein soll, müssen alle anderen Ebenen ausgeblendet werden.

nav > ul > li > ul {
  display: none;
}

Das Aussehen der einzelnen Menüpunkte sollte man stets über das „<a>“-Element definieren. Dazu ist es sinnvoll, den Link als Blockelement auszuzeichnen, um Innenabstände (mit der „padding“-Eigenschaft) definieren zu können. Bei Inline-Elementen funktioniert das nicht. Die Links der zweiten und dritten Menüebene lassen sich natürlich anders gestalten als die der ersten.

nav > ul a {
  display: block;
  white-space: nowrap;
  padding: 10px;
  background: rgb(195, 35, 45);
}
nav ul > li > ul > li a {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

Da wir hier im Beispiel keine festen Breiten für die Menüpunkte definiert haben, nehmen die einzelnen Elemente immer die Breite des Inhaltes an. Text bricht dabei jedoch immer um. Daher sollte man per „white-space“-Eigenschaft einen automatischen Zeilenumbruch verhindern.

Schriften und Farben anzupassen, gehört natürlich auch zur Menügestaltung dazu. Außerdem kann man gegebenenfalls Schatteneffekte und abgerundete Ecken einsetzen. Will man dem „<ul>“-Element selbst CSS-Eigenschaften zum Aussehen zuordnen, sollte man zusätzliche Eigenschaften vergeben.

nav > ul {
  float: left;
  overflow: hidden;
  padding: 0 10px 0 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
  background: rgb(195, 35, 45);
}

Die „float“-Eigenschaft sorgt dafür, dass die Breite des „<ul>“-Elementes nicht 100 Prozent ist, sondern sich der Breite der nebeneinander angeordneten Kindelemente anpasst. Per „overflow“ sorgt man dafür, dass abgerundete Ecken nicht durch die Kindelemente, die keine angerundeten Ecken haben, überdeckt werden.

Zweite und dritte Menüebene gestalten

Um den Zugriff auf die zweite Menüebene zu ermöglichen, wird die Pseudoklasse „:hover“ verwendet, die auslöst, wenn man mit der Maus über ein Listenelement der ersten Ebene fährt.

nav > ul > li:hover > ul {
  display: block;
  position: absolute;
}
nav > ul > li > ul > li {
  position: relative;
}

Während mit der „display“-Eigenschaft die zweite Ebene eines Menüpunkte angezeigt wird, sorgt „position“ dafür, dass das verschachtelte „<ul>“-Element nicht die Breite des übergeordneteten „<li>“-Elementes beeinflusst. Die „<li>“-Elemente der zweiten Ebene werden wiederum relativ dargestellt.

Für die dritte Menüebene sorgt „display“ wieder dafür, dass die Liste erst angezeigt wird, wenn man im übergeordneten „<li>“-Element die „:hover“-Pseudoklasse auslöst. Außerdem haben wir per CSS die dritte Ebene so ausgezeichnet, dass sie neben der Liste der zweiten Ebene dargestellt ist.

nav > ul > li > ul > li > ul {
  display: none;
}

nav > ul > li > ul > li:hover > ul {
  display: block;
}

nav > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}

Die „left“-Eigenschaft sorgt dafür, dass die dritte Liste neben der zweiten Liste angeordnet erscheint – und zwar auf der Höhe des übergeordneten „<li>“-Elementes (per „top“-Eigenschaft).

Alternatives Layout für mobile Geräte

Auf Smartphones gibt es selten genug Platz, um Menüelemente nebeneinander anzuordnen. Daher sollte man alle Elemente untereinander darstellen. Allerdings muss man auch dort nicht auf eine Dropdown-Navigation verzichten. Mit einigen wenigen Anpassungen lässt sich das Menü so darstellen, dass alle Menüpunkte untereinander platziert sind. Dazu müssen wir lediglich alle absoluten Positionierungen sowie die Floats entfernen.

nav > ul, #nav > ul > li {
  float: none;
}

nav > ul > li > ul, nav > ul > li:hover > ul {
  position: relative;
}

nav > ul > li > ul > li:hover > ul {
  position: relative;
  left: 0;
}
nav > ul > li > ul > li > ul > li > a {
  font-style: italic;
}

Außerdem muss die „left“-Eigenschaft auf Null gesetzt werden. Um die Menüpunkte der dritten Ebene besser von denen der zweiten unterscheiden zu können, stellen wir diese im Beispiel kursiv dar.

Um noch mehr Platz zu schaffen, ist es nicht unüblich, auch die Menüpunkte der ersten Ebene erst per „:hover“-Pseudoklasse erscheinen zu lassen. Dazu sind einige weitere Veränderungen notwendig. Zunächst einmal blenden wir alle Menüpunkte der ersten Ebene aus und erst per „:hover“ auf das oberste „<ul>“-Element ein. Da dieses „<ul>“-Element keine sichtbaren „<li>“-Elemente hat, wird per Pseudoelement „::before“ ein zusätzliches „<li>“-Element erzeugt, welches immer sichtbar ist. Diesem Pseudoelement weisen wir einen Text oder ein Icon zu.

nav > ul > li {
  display: none;
}
nav > ul:hover li {
  display: block;
}
nav > ul::before {
  display: block;
  content: "Menü";
  padding: 10px;
}

Natürlich gibt es auf Smartphones, die per Gesten gesteuert werden, keinen Hovereffekt, wie er mit der Maus auf Desktopgeräten ausgelöst wird. Stattdessen wird der Hovereffekt per Fingertap ausgelöst. Problematisch ist hierbei, dass bei einem Tap auf einen Link dieser zeitgleich mit dem Hovereffekt aufgerufen wird. Daher sollte man Menüpunkte, die ein Untermenü aufrufen, selbst nie mit einem Link versehen. Sonst sind untergeordnete Menüpunkte per Tap nicht erreichbar.

Entweder setzt man einen seiteninternen Link (also „#“) oder verzichtet ganz auf die Auszeichnung eines „<a>“-Elementes und ersetzt dieses beispielsweise durch ein „<span>“-Element.

Die untergeordneten Menüs werden jeweils unterhalb des übergeordneten Menüpunktes dargestellt.

Menüpunkte mit Unterseiten kennzeichnen

Damit man direkt erkennt, welche Menüpunkte ein verschachteltes Untermenü haben, könnten wir diese mit etwas CSS kennzeichnen. Dazu fügen wir jedem „<a>“-Element das Pseudoelement „::after“ hinzu, um ein Plus-Zeichen zu ergänzen.

nav li > a:after {
  content: " +";
}

Anschließend entfernen wir das Plus-Zeichen per Pseudoklasse „:only-child“ von solchen „<a>“-Elementen wieder, welche das einzige Kindelement sind, also kein „<ul>“-Element als Kind besitzen.

nav li > a:only-child:after {
  content: "";
}

Fazit

Es gibt viele Wege, eine responsive Navigation auf eine Webseite zu bauen, und ich hoffe, du konnest deine Vorstellungen in einem der obigen Beispiele wiederfinden.

Hast Du noch mehr gute Beispiele, die Dir gefallen? Poste sie in den Kommentaren!

Dieser Beitrag wurde am 7. April 2015 veröffentlicht und am 27. Januar 2020 von Grund auf überarbeitet.