SSBM - Single Standard for Modal Windows

12/30/25

2 min.

Definitions

The SSBM standard defines requirements for the semantics, accessibility, and functionality of burger menus

Structure and Semantics

The mobile menu must be designed with proper positioning and element structure in mind:

Menu positioning: use position: fixed, height: 100dvb, and width: 100% so that the menu fully occupies the screen, accounting for browser toolbars and status bars;
Overlay (background): created as a separate element with position: fixed. It overlays the page and is used to close the menu on click;
Open/close animation: use the left, right, top, and bottom properties for translation, rather than transform: translateX/Y(), if a simple fade-in/fade-out is required;
Screen borders: the menu should not extend beyond the viewport, especially on small screens.

HTML example:

<button class="burger-btn">☰</button>
<div class="mobile-menu">
  <div class="overlay"></div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/contact">Contact Us</a></li>
    </ul>
  </nav>
</div>

CSS Example:

.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;
}

Accessibility

The hamburger button must have an aria-label attribute;
You can add an aria-expanded attribute to indicate the menu's state (open/closed).

<button class="burger-btn" aria-label="Open menu" aria-expanded="false">☰</button>

Interactivity and Visual Feedback

Closing triggers: the menu closes when the burger button is clicked, a menu item is selected, or the overlay is clicked;
Scroll locking: when the menu is open, add overflow: hidden to <body> and fix the page position;
Animation: animate only left, bottom, right, or top for the menu and opacity for the overlay.

Toggling the class with 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'));