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

178

30/12/25

2 мин.

Определения

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

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

Мобильное меню должно быть построено с учётом корректного позиционирования и структуры элементов, для этого используется position: fixed;, block-size: 100dvb; и inline-size: 100%;, чтобы меню полностью занимало экран с учётом браузерных панелей и плашек, оверлей отдельным элементом с position: fixed; используется чтобы перекрывать страницу и закрывать меню при клике.

Для инимации открытия/закрытия применяйте сдвиг через свойства inset-inline-start, inset-inline-end, inset-block-start, inset-block-end, а не transform: translateX/Y();, если требуется простое появление/скрытие, также меню не должно выходить за пределы viewport, особенно на маленьких экранах:

<button class="burger-button">☰</button>
<div class="menu">
  <div class="menu__overlay"></div>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contact">Контакты</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;
}

Доступность

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

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

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

Меню закрывается при клике на кнопку-бургер, выбор пункта меню или клик на оверлей, при открытом меню должен стоять overflow: hidden; для <body> и позиция страницы должна быть фиксированной, если нужно добиться плавности, то лучше анимировать только inset-inline-start, inset-block-end, inset-inline-end или inset-block-start для меню и opacity для оверлея:

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

Похожие категории: