Responsive Navigation

Das Hamburger-Icon

Das Hamburger-Symbol hat sich als Schalter für das wichtigste Menü der Seite etabliert. Die erste Maxime für den barrierefreien Zugang zum Navigationsmenü lautet:

Klick statt :hover

Daran müssen wir uns gewöhnen: Die meisten Besucher kommen mit dem Handy oder dem Tablett – sprich ohne Maus. hover steht auf der Abschussliste: Vielleicht reagiert der Touchscreen auf eine leichte Berührung, aber meisten friert der :hover-Zustand auf dem Touchscreen ein. Zwei Klicks müssen die Hover-Zustände ersetzen.

Der Finger auf dem Touchscreen

Alles muss problemlos mit dem Finger erreichbar sein. Während die Maus ein exaktes Gerät für Klicks und das Hovern über einem Element darstellt, ist der Finger eine nicht vorhersagbare Fläche.

Alle Buttons und alle Links müssen groß genug sein, dass die Berührung mit dem Finger das Element genau trifft. 40 x 40 Pixel ist das Minimum. Zwischen aufeinander folgenden Links muss ein Abstand sein.

Der kleine graue Kasten mit 40 x 40 px:

Submenüs müssen erkennbar und im Zugriff bleiben. Die großen hierarchischen Drop-Down-Menüs der Vergangenheit sind überholt. Auch wenn sie uns selber logisch und systematisch erscheinen, denken Besucher nicht in hierarchischen Kategorien, sie suchen lieber nach dem passenden Thema im Suchfeld.

Viele Unterkategorien sind besser in markanten Gestaltungselementen des Layouts aufgehoben: in Karussells, in der Sidebar, im Fuß der Seite.

tempus

Nulla aliquet nisl quam, quis condimentum mi sagittis eu.

risus metus

Sed vel sollicitudin lorem. Suspendisse risus metus, posuere lectus.

dapibus

Duis vulputate sodales turpis, sed ultricies turpis dapibus quis.

Menü ohne Javascript

Auf zum nächsten Schritt für eine barrierefreie Navigation: Sie soll ohne Javascript funktionieren, sondern einfach von HTML und CSS gesteuert werden.

Das Hamburg-Icon und das Navigationsmenü sind die obersten Elemente der Seite und sollten so schnell wie möglich zur Verfügung stehen.

Hamburger aus reinem HTML, kein Icon-Font, animiert mit CSS

Natürlich spricht nichts dagegen, das Navigationsmenü mit Javascript auf Hochglanz aufzupolieren (progessive Enhancement).

Top-Navigation

Das Hamburger-Icon ist der erste Schritt und besteht aus nur aus wenigen Zeilen HTML und CSS.

<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>
   
   <nav class="topmenu">
      <ul>
         <li><a href="/tutorial/css-transform.html">Home</a></li>
         <li class="hassub">Submenü
            <ul>
               <li><a href="/css/css-selektor-kontextselektor.html">Selektoren</a></li>
               <li><a href="/css/breakpoints.html">Breakpoints</a></li>
            </ul>
         </li>
         <li><a href="/css/transitions.html">Transition</a></li>
         <li><a href="/html/input-checkbox.html">Checkbox</a></li>
      </ul>
   </nav>
</div>

Die HTML-Struktur kommt ohne Wrapper aus. <input type="checkbox" id="hamburg"> ist das einzige zusätzliche HTML-Tag, das für die Animation des Hamburgers und die Anzeige des Navigationsmenüs sorgt.

Menü-Items mit einem Submenü dürfen keine Links sein, denn sonst ist die Gefahr zu groß, dass der Finger auf dem Touchscreen den Link auslöst, noch bevor sich das Untermenü öffnet.

Menü mit CSS animieren

Anstelle eines div-Tags sitzt das Hamburger Icon in einem label-Tag. Das label-Tag ist durch das for-Attribut mit dem input-Element verbunden und reagiert synchron mit dem Input-Element auf Klicks und die Berührung auf dem Touchscreen. Das ist der Checkbox-Hack.

nav.topmenu { 
    height: auto; 
    max-height:0; 
    overflow: hidden; 
    transition: all 0.5s;
}

Das Menü bleibt verborgen.

Weil height nicht von height="0" zu height="auto" animiert werden kann, verbirgt max-height: 0 zusammen mit overflow: hidden das Navigationsmenü.

transition: all 0.5s; bereitet das Menü auf seinen Auftritt vor.

Jetzt wird es spannend, denn wenn label.hamburger geklickt bzw. gechecked ist, muss nicht nur das Hamburger Icon animiert werden, sondern auch das Navigationsmenü aufklappen.

Kontext-Selektoren erwischen ein Element in Abhängigkeit von seiner Position im HTML. Also noch mal ein tiefer Blick auf die HTML-Struktur:

   <input type="checkbox" id="hamburg">
   <label for="hamburg" class="hamburg">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
   </label>
   
   <nav class="topmenu">
      …
   </nav>

Selektor von rechts nach links lesen: das nav.topmenu, das auf .hamburg folgt, wenn #hamburg gecheckt ist.

#hamburg:checked + .hamburg  + nav.topmenu { 
    max-height: 600px; 
}