Problem mit Hamburger navigation container

[Gunnar Bittersmann]

@@Bendroid

Zunächst einmal die Frage: Warum soll ein Menü mit vier Items überhaupt hinter einem Hamburger-Icon versteckt werden? Das sollte auch auf kleinen Viewports so wenig Platz beanspruchen, dass man es gleich komplett anzeigen kann, ohne Nutzern zusätzliche Interktionen zum Öffnen aufzubürden.

<input id="menu-toggle" type="checkbox" name="menu-toggle">

<label for="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
</label>

Ins label-Element gehört eine Beschriftung, in dem Fall „Menü“. Diese kann visuell vesteckt werden.

3× span für drei Linien? Ein Hamburger-Icon macht man mit SVG oder mit Unicode-Zeichen (spontan fallen mir ≡ U+2261 IDENTICAL TO und ☰ U+2630 TRIGRAM FOR HEAVEN ein).

Der Checkbox-Hack (Checkbox zur Steuerung der Sichtbarkeit des Menüs) ist keine gute Idee. Nicht verwenden! Verwende stattdessen einen <button>. Am besten einen, der den Zustand „Menü nicht geöffnet“ bzw. „Menü geöffnet“ angibt, siehe Navigation menu buttons in Inclusive Components: Menus & Menu Buttons.

Wichtig ist, dass das Steuerungselement für die Sichtbarkeit des Menüs innerhalb des nav-Elements ist. Anderenfalls hätten Screenreader-Nutzer arge Probleme, dieses zu finden.

<nav>
  <button aria-expanded="false">
    <span class="visually-hidden">Menü</span>
    <span aria-hidden="true">≡</span>
  <button>
  <ul>
    ⋮
  </ul>
</nav>

So sollte das Markup aussehen. Mit JavaScript schaltet man aria-expanded zwischen "false" und "true" um. Das wäre dann auch das einzige, was JavaScript tun muss, die Sichtbarkeit des Menüs kann man dann per Geschwister-Kombinator wieder CSS überlassen:

[aria-expanded="false"] + ul { display: none }

Auch animiertes Rein-/Rausfahren ist mit etwas mehr JavaScript und CSS möglich, Beispiel.

🖖 Живіть довго і процвітайте

PS: Hatte ich schon erwähnt, dass das Hamburg-Icon für Menüs keine so gute Idee ist? 🤪