SSBM - Einheitlicher Standard für Burger-Menü

Definitionen

Der SSBM-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Burger-Menü fest.

Struktur und Semantik

Das mobile Menü muss unter Berücksichtigung der korrekten Positionierung und Struktur der Elemente aufgebaut werden. Dazu werden position: fixed;, block-size: 100dvb; und inline-size: 100%; verwendet, damit das Menü den Bildschirm unter Berücksichtigung der Browserleisten und-felder vollständig ausfüllt. Ein Overlay als separates Element mit position: fixed; wird verwendet, um die Seite zu überlagern und das Menü bei einem Klick auszublenden.

Für die Animation des Öffnens/Schließens verwenden Sie einen Versatz über die Eigenschaften inset-inline-start, inset-inline-end, inset-block-start und inset-block-end anstelle von transform: translateX/Y();, wenn ein einfaches Ein- und Ausblenden gewünscht ist. Außerdem sollte das Menü nicht über die Grenzen des viewport hinausragen, insbesondere auf kleinen Bildschirmen:

<button class="burger-button">☰</button>
<div class="menu">
  <div class="menu__overlay"></div>
  <nav>
    <ul>
      <li><a href="/">Startseite</a></li>
      <li><a href="/about">Über uns</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
</div>

.menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  inline-size: 100%;
  block-size: 100dvb;
  background: white;
  transition: inset-inline-start 0.3s;
}

.menu.active {
  inset-inline-start: 0;
}

.menu__overlay {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu.active .menu__overlay {
  opacity: 1;
  visibility: visible;
}

Barrierefreiheit

Die Hamburger-Schaltfläche sollte über aria-label und aria-expanded verfügen, um den Status des Menüs (geöffnet/geschlossen) widerzuspiegeln:

<button class="burger-button" aria-label="Menü öffnen" aria-expanded="false">☰</button>

Interaktivität und Visuelle Rückmeldung

Das Menü wird durch einen Klick auf die Hamburger-Schaltfläche, die Auswahl eines Menüpunkts oder einen Klick auf das Overlay geschlossen. Bei geöffnetem Menü muss für <body> die Eigenschaft overflow: hidden; gesetzt sein und die Position der Seite muss fixiert sein. Um einen flüssigen Übergang zu erzielen, empfiehlt es sich, nur inset-inline-start, inset-block-end, inset-inline-end oder inset-block-start für das Menü sowie opacity für das Overlay zu animieren:

const button = document.querySelector('.burger-button');
const menu = document.querySelector('.menu');
const overlay = menu.querySelector('.menu__overlay');

button.addEventListener('click', () => {
  const isActive = menu.classList.toggle('active');

  button.setAttribute('aria-expanded', isActive);
});

overlay.addEventListener('click', () => {
  menu.classList.remove('active');
  button.setAttribute('aria-expanded', 'false');
});