CSS Grundlagen • Hamburger Icon nur mit HTML und CSS erstellen

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.

Grundsätzlicher Aufbau einer Responsiven Navigation

Wir verwenden Custom Properties, um das Layout der Navigation zu definieren. Es ist allgemein üblich, Custom Properties für die Pseudoklasse :root zu definieren, so dass sie global referenziert werden können. Custom Properties werden stets mit -- eingeleitet. Auf diese Weise lässt sich die Navigation besonders komfortabel anpassen. Für den Zugriff auf benutzerdefinierte Eigenschaften wird die CSS-Funktion var(…) verwendet.

Der typische CSS-Code für eine Responsive Navigation sieht folgendermaßen aus:

Basis-Formatierung für eine einfache Responsive Navigation

/* Einstellungen für eine einfache responsive Navigation */
:root {
  --topNavBtnWidth: 10em;
  --topNavBtnBG: #999999;
  --topNavBtnFG: #ffffff;
  --toppNavHoverBG: #ffa500;
  --topNavHoverFG: #000000;
}

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

nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: var(--topNavBtnWidth);
  text-align: center;
  background: var(--topNavBtnBG);
}

nav a {
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: var(--topNavBtnFG);
}

nav a:hover {
  background: var(--topNavHoverBG);
  color: var(--topNavHoverFG);
}

@media screen and (max-width: 768px) {
  nav ul {
    background: var(--topNavBtnBG);
  }

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

Grundstruktur für eine einfache Responsive Navigation

<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

Ändere die Größe des Browser-Fensters oder den Zoom-Faktor, um den Effekt der responsiven Navigation zu sehen.

Hamburger Button erzeugen – ohne JavaScript

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

:root {
  --hamburgerBG: #dddddd;
  --hamburgerCheckedBG: #82ca50;
  --hbLineColor: #000000;
}

.hbRow {
  position: relative;
}

input#hamburger {
  display: none;
}

label.hamburger {
  display: none;
  position: relative;
  margin: 0.5em auto;
  width: 74px;
  height: 50px;
  background: var(--hamburgerBG);
  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: var(--hbLineColor);
}

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

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

#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: var(--hamburgerCheckedBG);
}

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

Hamburger-Icon ohne JavaScript erstellen:

Hamburger-Button mit HTML und CSS 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>

Animiertes Hamburger-Icon ohne JavaScript

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 ausgeblendet und die erste und dritte Linie um 45 bzw. -45 Grad (Englisch: Degree) rotiert wird.

Viele CMS wie WordPress oder Joomla verwenden eine Menge JavaScript Code, obwohl HTML und CSS völlig ausreichen.

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

/* CSS Teil 1: Horizontale Navigation erstellen */
:root {
  --mainNavBtnWidth: 8em;
  --mainNavBG: #cccccc;
  --mainNavFG: #000000;
  --mainNavHoverBG: #bbbbbb;
  --mainNavActiveBG: #04aa6d;
  --mainNavActiveFG: #ffffff;
}

nav#mainNav {
  display: block;
  margin-bottom: 0.5em;
}

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

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

#mainNav a {
  display: block;
  padding: 0.5em 1em;
  min-width: var(--mainNavBtnWidth);
  text-align: center;
  text-decoration: none;
  background: var(--mainNavBG);
  color: var(--mainNavFG);
}

nav li a:hover:not(.active) {
  background: var(--mainNavHoverBG);
}

nav li a.active {
  font-weight: bold;
  background: var(--mainNavActiveBG);
  color: var(--mainNavActiveFG);
}

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 Navigation nur bei Bedarf angezeigt. Mit dem Hamburger Button kann der Benutzer das Menü ausklappen oder einklappen. Der hier vorgestellte Hamburger-Button funktioniert ohne JavaScript.

Hamburger-Button formatieren

/* CSS Teil 2: Hamburger Button erstellen */
:root {
  --hamburgerBG: #dddddd;
  --hamburgerCheckedBG: #ed3c3c;
  --hbLineColor: #000000;
}

.hbRow {
  position: relative;
}

input#hamburger {
  display: none;
}

label.hamburger {
  display: none;
  position: relative;
  margin: 0.5em auto;
  width: 74px;
  height: 50px;
  background: var(--hamburgerBG);
  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: var(--hbLineColor);
}

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

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

#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: var(--hamburgerCheckedBG);
}

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

/* CSS Teil 3: Mobile Navigation erstellen */
.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

<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>
<div class="topMenu">
<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>
</div>
</div>
</nav>

Responsive Navigation mit animiertem Hamburger-Button ohne JavaScript