SSBM - Единый стандарт для бургер меню

30/12/25

2 мин.

Определения

Стандарт SSBM определяет требования к семантике, доступности и логике работы бургер меню.

Структура и Семантика

Мобильное меню должно быть построено с учётом корректного позиционирования и структуры элементов:

Позиционирование меню: используйте position: fixed, height: 100dvb и width: 100%, чтобы меню полностью занимало экран с учётом браузерных панелей и плашек;
Оверлей (подложка): создаётся отдельным элементом с position: fixed. Он перекрывает страницу и используется для закрытия меню при клике;
Анимация открытия/закрытия: применяйте сдвиг через свойства left, right, top, bottom, а не transform: translateX/Y(), если требуется простое появление/скрытие;
Границы экрана: меню не должно выходить за пределы viewport, особенно на маленьких экранах.

Пример HTML:

<button class="burger-btn">☰</button>
<div class="mobile-menu">
  <div class="overlay"></div>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contact">Контакты</a></li>
    </ul>
  </nav>
</div>

Пример CSS:

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

Доступность

Кнопка-бургер должна иметь aria-label;
Можно добавить aria-expanded для отражения состояния меню (открыто/закрыто).

<button class="burger-btn" aria-label="Открыть меню" aria-expanded="false">☰</button>

Интерактивность и Визуальный отклик

Триггеры закрытия: меню закрывается при клике на кнопку-бургер, выбор пункта меню или клик на оверлей;
Блокировка скролла: при открытом меню добавляйте overflow: hidden для <body> и фиксируйте позицию страницы;
Анимация: анимируйте только left, bottom, right или top для меню и opacity для оверлея.

Переключение класса на js:

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'));