CSS Grundlagen • Responsive Navigation leicht gemacht

Responsive Navigation erstellen

Responsive Webdesign ist mittlerweile Standard, wenn es darum geht, Webseiten zu gestalten. Denn potenzielle Besucher surfen nicht mehr nur mit dem Desktop-Computer oder Laptop, sondern nutzen immer häuiger mobile Endgeräte wie Smartphone oder Tablet. In einer digitalen Welt, die immer mobiler wird, ist eine optimale Benutzerfreundlichkeit für alle Endgeräte von zentraler Bedeutung.

Eine gute und benutzerfreundliche Navigation ist wichtig, damit Besucher Inhalte schnell finden.

Die Responsive Navigation passt sich automatisch an verschiedene Bildschirmgrößen an, damit sie sowohl für den großen Desktop-Monitor als auch für das kleine Smartphone-Display optimal funktioniert. Die mobile Navigation ist eine besondere Herausforderung bei der Gestaltung der Website. Um die Usability für mobile Endgeräte genauso zufriedenstellend zu gestalten wie für Desktop-Computer, sollte man sich genug Zeit zur Erstellung einer responsiven Navigation nehmen, die für alle Geräte sehr gut funktioniert.

Mit dieser Anleitung lernst du, wie man eine responsive Navigation bauen kannst. Zum Einklappen und Ausklappen der mobilen Navigation verwenden wir ein Hamburger Menü, das ohne JavaScript funktioniert.

Grundlagen der Responsiven Naviagtion

Eine responsive Navigation basiert in der Regel auf folgenden grundlegenden Prinzipien:<\p>

Flexibles Layout: Die Navigation sollte sich automatisch anpassen und je nach Bildschirmbreite ihr Design ändern.
Verstecken und Anzeigen: Auf kleineren Bildschirmen wird das Menü oft durch ein Hamburger-Icon, ersetzt, das man durch Antippen oder Anklicken bei Bedarf öffnen (ausklappen) kann.
CSS-Only Lösung: JavaScript, jQuery oder eine andere JS-Erweiterung ist nicht zwingend erforderlich, um eine responsive Navigation zu erstellen. Auch wenn wir heute JavaScript auf allen Geräten voraussetzen können, ist die stabilste Lösung für die Navigation HTML mit CSS ohne Javascript.
Animationen und Übergänge: Um eine geschmeidige Benutzererfahrung zu gewährleisten, können CSS-Animationen verwendet werden.

HTML-Struktur für die Responsive Naviagtion

Eine typische HTML-Grundlage für eine Responsive Navigation sieht folgendermaßen aus:

Basis-Formatierung für eine einfache Responsive Navigation

/* Responsive Navigation: display: inline-block */
nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 10em;
  background: #999999;
  color: #ffffff;
}

nav a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #ffffff;
}

nav a:hover {
  background: #ffa500;
  color: #000000;
}

@media screen and (min-width: 768px) {
  nav ul {
    background: #999999;
  }

  nav li {
    display: block;
    margin: 1em auto;
    width: 100%;
  }
}

Grundstruktur für eine einfache Responsive Navigation

<h2>Responsive Navigation mit display: inline-block</h2>

<nav>
<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Unser Service</a></li>
  <li><a href="#">Über uns</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

Responsive Navigation mit display: inline-block

Hamburger Menü erzeugen

Das Hamburger-Icon – drei parallele Linien (Trigram) – hat sich als De Facto Standard für Touchscreens (bzw. Touch Screens) für die Top-Navigation auf mobilen Endgeräten etabliert. Der Hamburger-Button stammt fast immer aus einer umfangreichen Icon-Sammlung. Hier wird das Icon durch fünf einfache HTML-Tags und eine Prise CSS erzeugt.

Hamburger-Icon gestalten:

Styling für den Hamburger-Button

.hbRow {
  position: relative;
}

input#hamburger {
  display: none;
}

label.hamburger {
  display: none;
  position: relative;
  margin: 0.5em auto;
  width: 74px;
  height: 50px;
  background: #dddddd;
  border-radius: 4px;
}

.hbLine {
  display: block;
  position: absolute;
  left: 10px;
  width: 56px;
  height: 4px;
  background: transparent;
  border-radius: 2px;
  transition: 0.5s;
  transform-origin: center;
}

.hbLine:nth-child(1) {
  top: 12px;
  background: #ffffff;
}

.hbLine:nth-child(2) {
  top: 24px;
  background: #ffffff;
}

.hbLine:nth-child(3) {
  top: 36px;
  background: #ffffff;
}

.hamburger:checked + .hamburger .hbLine:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}

.hamburger:checked + .hamburger .hbLine:nth-child(2) {
  opacity: 0;
}

.hamburger:checked + .hamburger .hbLine:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.hamburger:checked + .hamburger {
  background: #ed3c3c;
}

Das Plus-Symbol steht für den Nachbar-Selektor (Englisch: Adjacent Selector)

Hamburger-Icon ohne JavaScript erzeugen:

Hamburger-Button erzeugen

<div class="hbRow">
<input type="checkbox" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="hbLine"></span>
<span class="hbLine"></span>
<span class="hbLine"></span>
</label>
</div>

Hamburger-Icon

Hamburger Menü – Beschreibung der Funktion

Hinter dem Hamburger Menü befindet sich normalerweise die Haupt-Navigation der Webseite. Der Hamburger-Button zum Aufklappen der Navigation wird in der Regel nur für kleine Displays angezeigt. da auf Smartphones und Tablets nur wenig Platz zur Verfügung steht.

Durch Anklicken oder Antippen des Buttons wird die Navigation der Seite durch Verschieben des Haupt-Contents angezeigt. Die drei horizontalen Linien ändern sich dabei in ein großes X. Das X zum Schließen der Navigation wird erzeugt, indem die mittlere Linie ausgebendet und die erste und dritte Linie um 45 bzw. -45 Grad Englisch: Degree) rotiert wird.

Viele CMS wie WordPress oder Joomla mit einer Menge JavaScript an. obwohl HTML und CSS völlig ausreichend sind.

Das Hamburger Menü auf dieser Seite kommt ohne JavaScript aus.

Responsive Navigation mit dem Hamburger Menü und Media Queries

Das Hamburger-Icon befindet sich in einem Label-Tag, das durch das for-Attribut mit dem Input-Element verbunden ist. Es reagiert mit dem Input-Element auf Klicks oder Antippen. Diese Verknüpfung von Label und Input ist der bekannte Checkbox-Hack.

Auf dem Desktop-Computer und Laptop wird eine Website in der Regel im Widescreen-Format angezeigt. Für Geräte mit einer Bildschirmbreite über 800px erstellen wir deshalb eine horizontale Navigation:

horizontale Navigation formatieren

/* Teil 1: Horizontale Navigation gestalten */
nav#mainNav {
  display: block;
  margin-bottom: 0.5em;
}

#mainNav ul {
  margin: 0;
  padding: 0;
  height: auto;
  list-style-type: none;
}

#mainNav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: fit-content;
  background: #6ccd6c;
}

#mainNav a {
  display: block;
  padding: 0.5em 1em;
  min-width: 8em;
  text-align: center;
  text-decoration: none;
  background: #cccccc;
  color: #000000;
}

nav li a:hover:not(.active) {
  background: #bbbbbb;
  color: #000000;
}

nav li a.active {
  font-weight: bold;
  background: #04aa6d;
  color: #ffffff;
}

Für die Darstellung von Websites werden mobile Endgeräte gewöhnlich im Hochformat verwendet. Aufgrund der geringen Bildschirmbreite von Smartphones in dieser Ausrichtung muss die Navigation anders dargestellt werden als bei Desktops. Der Platz auf dem Smartphone-Display ist begrenzt. Deshalb wird die Navigationnur bei Bedarf angezeigt. Mit dem Hamburger Button kann der Benutzer das Menü anzeigen oder ausblenden. Der hier vorgestellte Hamburger-Button funktioniert ohne JavaScript.

Hamburger-Button formatieren

/* Teil 2: Hamburger Button gestalten */
.hbRow {
  position: relative;
}

input#hamburger {
  display: none;
}

label.hamburger {
  display: none;
  position: relative;
  margin: 0.5em auto;
  width: 74px;
  height: 50px;
  background: #dddddd;
  border-radius: 4px;
}

.hbLine {
  display: block;
  position: absolute;
  left: 10px;
  width: 56px;
  height: 4px;
  background: transparent;
  border-radius: 2px;
  transition: 0.5s;
  transform-origin: center;
}

.hbLine:nth-child(1) {
  top: 12px;
  background: #000000;
}

.hbLine:nth-child(2) {
  top: 24px;
  background: #000000;
}

.hbLine:nth-child(3) {
  top: 36px;
  background: #000000;
}

#hamburger:checked + .hamburger .hbLine:nth-child(1) {
  transform: transform(12px) rotate(45deg);
}

#hamburger:checked + .hamburger .hbLine:nth-child(2) {
  opacity: 0;
}

#hamburger:checked + .hamburger .hbLine:nth-child(3) {
  transform: transform(-12px) rotate(-45deg);
}

#hamburger:checked + .hamburger {
  background: #ed3c3c;
}

Bei Smartphones und Tablets im Hochformat (Bildschirmbreite ≤ 800px) ist die horizontale Navigation ausgeblendet. Stattdessen wird ein Hamburger Button angezeigt. Um das Menü zu öffnen, muss der User auf den Button klicken oder ihn antippen.

Mobile Navigation formatieren

/* Teil 3: Mobile Navigation gestalten */
.topMenu {
  height: auto;
  overflow: hidden;
  background: transparent;
  transition: all 0.5s;
}

#hamburger:checked + .hamburger + .topMenu {
  height: auto;
  max-height: 100em;
  background: transparent;
}

@media screen and (max-width: 800px) {
  label.hamburger {
    display: block;
  }

  .topMenu {
    max-height: 0;
  }

  .topMenu ul li {
    padding-top: 1ex;
    padding-bottom: 1ex;
  }

  #mainNav ul {
    position: relative;
    width: 100%;
    height: auto;
  }

  #mainNav li {
    width: 100%;
    height: auto;
  }

  #mainNav ul li a {
    padding: 1em 0.5em;
  }
}

Responsive Navigation erstellen, kein JavaScript erforderlich

<h2>Responsive Navigation mit Hamburger Button</h2>

<nav id="mainNav">
<div class="hbRow">
<input type="checkbox" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="hbLine"></span>
<span class="hbLine"></span>
<span class="hbLine"></span>
</label>
<nav>
<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Unser Service</a></li>
  <li><a href="#">Aktuelle Aktionen</a></li>
  <li><a href="#">Über uns</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

CSS Grundlagen: So machst du deine Navigation mobile friendly – Tipps für die ideale Gestaltung