onclick funktionen

[Gunnar Bittersmann]

@@Christian Wansart

du musst dir den aktuellen Zustand abspeichern

Diese Information sollte im DOM vorhanden sein: im hidden-Attribut des entsprechenden Elements (nav).

var navigationOffen = false;

Dann braucht man dieses Flag nicht, sondern man fragt das Vorhandensein des hidden-Attributs ab.

Noch „kuhler“ ist natürlich, das hidden-Attribut nicht initial ins HTML zu schreiben, sondern erst mit JavaScript zu setzen – dann wird die Navigation nur versteckt, wenn JavaScript ausgeführt wird, und funktioniert damit auch ohne JavaScript.

Dafür wird der Button initial versteckt und erst mit JavaScript sichtbar gemacht. Außerdem bekommt er ein aria-expanded-Attribut, dessen Wert ebenfalls mit dem Öffnen/Schließen des Menüs umgeschaltet wird:

<button id="menu-toggler" hidden="hidden">Menü öffnen/schließen</button>
<nav id="main-nav">
  ⋮
</nav>

var menuTogglerElement = document.querySelector('#menu-toggler');
var mainNavElement = document.querySelector('#main-nav');

menuTogglerElement.removeAttribute('hidden');
menuTogglerElement.addEventListener('click', toggleMenu);

toggleMenu();

function toggleMenu()
{
  if (mainNavElement.hasAttribute('hidden'))
  {
    mainNavElement.removeAttribute('hidden');
    menuTogglerElement.setAttribute('aria-expanded', 'true');
  }
  else
  {
    mainNavElement.setAttribute('hidden', true);
    menuTogglerElement.setAttribute('aria-expanded', 'false');
  }
}

Siehe Léonie Watsons Toggletip design pattern.

Was man noch machen könnte: Den Button nicht mit „öffnen/schließen“ beschriften, sondern die Beschriftung je nach Zustand zwischen „Menü öffnen“ und „Menü schließen“ wechseln lassen.

LLAP 🖖