CSS Transform : Hamburger Icon aus HTML und CSS pur

Hamburger Icon für Touchscreens ohne Icon Font, nur CSS, ohne Javascript, ohne jQuery

Das Hamburger-Icon – das Viereck mit drei oder vier Linien – hat sich als Symbol für die Top-Navigation auf Touchscreens durchgesetzt und ist ein De Facto Standard.

Fast immer kommt der Hamburger-Button aus einem umfangreichen Icon-Font, hier besteht er aus fünf kurzen HTML-Tags und wahlweise mit oder ohne Javascript.

Viele Templates und Themes für Content Management Systeme wie WordPress oder Drupal treiben das Hamburger-Menü mit jeder Menge Javascript und jQuery an. Dabei reicht einfaches CSS mit Transform und Transition aus. Nur eine homöopathische Dosis Javascript ersetzt das ausgediente :hover, das auf Touchscreens nicht zuverlässig oder gar nicht funktioniert.

Komplett ohne Javascript klappt's auch.

Hamburger aus reinem HTML

Das Hamburger-Icon braucht keinen Icon Font, kein SVG oder Bild, sondern ist schlichtes HTML.

Hamburger HTML
<div class="row">
   <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
   </div>
</div>

Hamburger CSS

.row ist nur das Drumherum und ist nicht besonders positioniert. Das CSS für den Hamburger positioniert das Viereck, um es vertikal und horizontal zu zentrieren und um die drei Linien innerhalb des Vierecks absolut zu positionieren.

Die Transition gilt dem border-radius, der das Viereck beim Mausklick in einen Kreis verwandelt.

.row { background: dimgray; width: 100%; height: 200px; }

.hamburger {
   background: blue;
   width: 60px; 
   height: 60px; 
   position: relative; 
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 4px solid gainsboro; 
   border-radius: 4px; 
   transition: border-radius .5s;
}

Deckel, Unterseite und Belag des Hamburgers, die drei Streifen, sitzen absolut im Viereck des Icons.

.line { 
   position: absolute; 
   height: 6px; 
   background: gainsboro;
   border-radius: 3px;
   width: 40px; 
   display: block; 
   left:10px;
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 28px; }
.line:nth-child(3) { top: 44px; }

Linie 1 und Linie 3 werden beim Touch rotiert, die mittlere Linie ausgeblendet.

Hamburger-Animation mit transform

Jetzt fehlt nur noch die Animation für den Klick: Wenn der Benutzer auf den Hamburger klickt, kommt die Klasse open dazu: <div class="hamburger open">. Dafür sorgt im Anschluss ein minimales Stück Javascript.

Das Viereck rund um die drei Linien wird durch border-radius zum Kreis, transform: translateY dreht die obere und untere Linie, die mittlere Linie wird mit opacity ausgeblendet.

.hamburger.open {
   border-radius: 50%;
}

.hamburger.open .line:nth-child(1){
   transform: translateY(16px) rotate(-45deg);
}

.hamburger.open .line:nth-child(2){
   opacity:0;
}

.hamburger.open .line:nth-child(3){
   transform: translateY(-16px) rotate(45deg);
}

Mini-Script

Javascript bringt eine Methode toggle (Hin- und Herschalten) von Haus aus mit, das ist die Übersetzung von CSS :hover in Javascript.

Der erste Touch fügt die Klasse open hinzu, der nächste Touch entfernt sie wieder. Wer den Hamburger ohne Javascript vorzieht, kann diesen Absatz überspringen .

Javascript classList toggle
<script>
   var hamburger = document.querySelector(".hamburger");
   hamburger.onclick = function () {
      this.classList.toggle ("open");
   }
</script>

Ich belasse es bei vier Zeilen Javascript, die sich gut nachvollziehen lassen.

Wichtig ist nur, dass das Script erst nach dem HTML-Hamburger sitzt, denn sonst könnte das Script noch nicht auf das HTML zugreifen. Der beste Platz für das Script ist im Fuß vor dem schließenden body-Tag.

Der Checkbox-Hack ist aufwändiger im nächsten Absatz befreit den Hamburger von diesen vier Zeilen Javascript.

Animiertes Hamburger-Icon ohne Javascript

Es geht auch komplett ohne Javascript, das Hamburger-Icon kommt mit HTML und CSS aus. An die Stelle von Javascript tritt der Checkbox-Hack.

Eine Checkbox (input type checkbox) hat zwei Zustände: checked und nicht checked. Ein label-Element, das über das for-Attribut mit dem input-Tag verbunden ist, empfängt den Klick genauso wie das input-Tag, selbst wenn das input-Tag verborgen ist.

HTML
<div class="hamburg-row">
    <input type="checkbox" id="hamburg">
    <label for="hamburg" class="hamburg">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </label>
</div>
  • input type="checkbox" wird Teil des Hamburger-Buttons, aus dem div wird das label-Tag.
  • Das CSS verbirgt das input-Element mit display:none,
  • label bekommt display:block, um die drei Linien des Hamburgers zu platzieren und zu animieren.
label und input type checkbox
label.hamburg { 
	display: block;
	background: #555; width: 75px; height: 50px; 
	position: relative; 
	margin-left: auto; margin-right: auto;
	border-radius: 4px; 
	transition: border-radius .5s;
}

input#hamburg {display:none}

Der Hamburger hat eine klassische Form, die Animation basiert aber auf derselben Technik wie zuvor.

.line { 
	position: absolute; 
	left:10px;
	height: 4px; width: 55px; 
	background: #fff; border-radius: 2px;
	display: block; 
	transition: 0.5s; 
	transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

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

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

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

Die drei Kontext-Selektoren greifen auf die Linien des Hamburger-Symbols zu. Das Plus-Symbol steht für den Nachbar-Selektor oder Adjacent Selector: Das Element, das direkt auf das input-Element folgt.

Zwischen dem input-Tag und dem label-Element darf also kein weiteres HTML-Element sitzen.

input#hamburg + label.hamburg

Zwischen dem input-Tag und dem label-Element darf also kein weiteres HTML-Element sitzen.

Hamburger HTML und CSS