CSS Transform : Hamburger Icon aus HTML und CSS pur

Das Hamburger-Menü

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.

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

Hamburger aus reinem HTML

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

.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.

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

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

label.hamburg { 
   display: block;
   background: #555; width: 75px; height: 50px; 
   position: relative; 
   margin-left: auto; margin-right: auto;
   border-radius: 4px; 
}

input#hamburg {display:none}

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

Animiertes Hamburger-Icon ohne Javascript

Eine Checkbox (input type checkbox) hat zwei Zustände: checked und nicht checked. Ein HTML 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.

• 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.

.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 (label for="hamburg" class="hamburg").

#hamburg:checked + .hamburg .line

Zwischen dem input-Tag und dem label-Element darf also kein weiteres HTML-Element sitzen. Damit das animierte Hamburger-Icon ein komplettes Menü für die Navigation steuert, sind ebenfalls Selektoren verantwortlich.

Alternative: Mini-JavaScript für die Hamburger-Animation

Ist das nun mehr oder weniger, komplizierter oder einfacher als eine Animation mit Javascript?

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

<div class="row">
    <div class="hamburg">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </div>
</div>

Das CSS für den animierten Hamburger bleibt gleich, nur CSS für input type checkbox und label entfällt und :checked wird durch die Klasse .checked ersetzt. Mit Javascript können wir auf das komplizierte Verhältnis von Nachbarn- und indirekte Nachbarn-Selektoren verzichten.

.hamburg { 
   display: block;
   background: #555; width: 75px; height: 50px; 
   position: relative; 
   margin-left: auto; margin-right: auto;
   border-radius: 4px; 
   transition: border-radius .5s;
}

.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 .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

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

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

Der erste Touch fügt die Klasse checked hinzu, der nächste Touch entfernt sie wieder.

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

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

Wichtig ist, dass dieses Script erst nach dem HTML-Hamburger folgt, denn sonst könnte das Script noch nicht auf das HTML zugreifen. Dafür muss das Skript im head-Element der Seite mit "defer" geladen werden. Ansonsten ist der beste Platz für das Script im Fuß der Seite vor dem schließenden body-Tag.

Die klassische Methode mit Javascript ist vielleicht einen Tick weniger aufwändig als die reine HTML + CSS-Version.