SSBM - Einheitlicher Standard für modale Fenster

30/12/25

2 min.

Definitionen

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

Struktur und Semantik

Das mobile Menü muss unter Berücksichtigung der korrekten Positionierung und Struktur der Elemente aufgebaut sein:

Positionierung des Menüs: Verwenden Sie position: fixed, height: 100dvb und width: 100%, damit das Menü den Bildschirm unter Berücksichtigung der Browserleisten und -felder vollständig ausfüllt;
Overlay (Hintergrund): Wird als separates Element mit position: fixed erstellt. Es überlagert die Seite und dient dazu, das Menü bei einem Klick zu schließen;
Animation zum Öffnen/Schließen: Verwenden Sie die Verschiebung über die Eigenschaften left, right, top, bottom und nicht transform: translateX/Y(), wenn ein einfaches Ein- und Ausblenden gewünscht ist;
Bildschirmränder: Das Menü sollte nicht über den viewport hinausragen, insbesondere auf kleinen Bildschirmen.

HTML-Beispiel:

<button class="burger-btn">☰</button>
<div class="mobile-menu">
  <div class="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>

CSS-Beispiel:

.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100dvb;
  background: white;
  transition: left 0.3s;
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.mobile-menu.active .overlay {
  opacity: 1;
  visibility: visible;
}

Barrierefreiheit

Die Burger-Schaltfläche muss über ein aria-label verfügen;
Es kann ein aria-expanded hinzugefügt werden, um den Status des Menüs (geöffnet/geschlossen) anzuzeigen.

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

Interaktivität und Visuelle Rückmeldung

Auslöser zum Schließen: Das Menü wird geschlossen, wenn auf die Burger-Schaltfläche geklickt wird, ein Menüpunkt ausgewählt wird oder auf das Overlay geklickt wird;
Scroll-Sperre: Fügen Sie bei geöffnetem Menü overflow: hidden für <body> hinzu und fixieren Sie die Position der Seite;
Animation: Animieren Sie nur left, bottom, right oder top für das Menü und opacity für das Overlay.

Klassenwechsel mit JavaScript:

const btn = document.querySelector('.burger-btn');
const menu = document.querySelector('.mobile-menu');
const overlay = menu.querySelector('.overlay');

btn.addEventListener('click', () => menu.classList.toggle('active'));
overlay.addEventListener('click', () => menu.classList.remove('active'));