Как создать переключаемое мобильное меню без фреймворков

Краткое описание концепции

Переключаемое мобильное меню — это компактный интерфейс навигации (часто «гамбургер»-иконка), который при клике раскрывает список ссылок. Идея проста: скрыть навигацию через CSS (display: none) и показать через изменение класса, управляемого JavaScript.

Что понадобится

• Файлы проекта: index.html, styles.css, script.js
• Базовые знания HTML/CSS/JS
• Любой редактор кода и современный браузер

HTML

Создайте базовую разметку. Включите кнопкой-контейнером aria-атрибуты для доступности.

CSS

Минимальный набор стилей и позиционирование. Комментарии переведены и упрощены для понятности.

/* Контейнер секции: пример расположения на странице */
section{
  width: 800px;
  height: 600px;
  margin-top: 50px;
  margin-left: 250px;
  border: 1px solid black;
  background: #e6e3dc;
}

/* Позиционируем кнопку-гамбургер */
#toggle-container{
  display: grid;
  width: fit-content;
  margin-left: 720px;
  margin-top: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Три полоски гамбургера */
#one, #two, #three{
  background: black;
  width: 30px;
  height: 3px;
  margin-top: 5px;
  display: block;
}

/* Навигация скрыта по умолчанию */
.toggle-content{
  display: none;
  margin-left: 700px;
  margin-top: 20px;
}

.toggle-content a{
  display: block;
  text-decoration: none;
  color: black;
  font-size: 30px;
}

.toggle-content a:hover{
  color: blue;
}

/* Класс, который делает навигацию видимой */
.displayed{
  display: block;
}

/* Дополнительно: анимация плавного появления */
.toggle-content{
  transition: opacity 150ms ease, transform 150ms ease;
  opacity: 0;
  transform: translateY(-5px);
}
.displayed{
  opacity: 1;
  transform: translateY(0);
}

JavaScript — простой рабочий пример

Ниже исправленная версия: отображение меню переключается по клику на кнопку, а также корректно обновляются aria-атрибуты.

// Получаем элементы
var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");

// Клик по кнопке переключает видимость и aria-атрибуты
toggler.addEventListener("click", function(event){
  event.stopPropagation(); // чтобы клик по кнопке не всплывал на window
  var isShown = toggleContents.classList.toggle("displayed");
  // Обновляем aria
  toggler.setAttribute('aria-expanded', isShown);
  toggleContents.setAttribute('aria-hidden', !isShown);
});

// Клик в любой точке страницы закрывает меню, если оно открыто
window.addEventListener('click', function(event) {
  // Если клик вне кнопки и вне меню — скрываем
  if (!event.target.closest('#toggle-container') && !event.target.closest('#toggle-content')) {
    if (toggleContents.classList.contains('displayed')) {
      toggleContents.classList.remove('displayed');
      toggler.setAttribute('aria-expanded', 'false');
      toggleContents.setAttribute('aria-hidden', 'true');
    }
  }
});

// Закрытие по Escape для удобства клавиатурных пользователей
window.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    if (toggleContents.classList.contains('displayed')) {
      toggleContents.classList.remove('displayed');
      toggler.setAttribute('aria-expanded', 'false');
      toggleContents.setAttribute('aria-hidden', 'true');
      toggler.focus();
    }
  }
});

Частые ошибки и когда это может не сработать

• Неправильные имена классов: в исходном примере JS убирал/искал класс display, а в CSS использовался displayed — это ломает логику. Всегда держите имена синхронизированными.
• Отсутствие event.stopPropagation() приведёт к немедленному закрытию меню при клике на кнопку, если есть глобальный handler на window.
• Если меню расположено внутри элемента с pointer-events: none, клики не будут работать.
• На старых браузерах без поддержки classList.toggle могут понадобиться полифилы.

Варианты и альтернативные подходы

• Использовать checkbox + label (CSS-only) для простых реализаций, когда JavaScript ограничен.
• Управлять видимостью через transform (translate + opacity) вместо display для плавной анимации.
• Использовать CSS-переменные для быстрого переключения темы/цветов.
• Применять библиотеку управления состоянием (например, в React/Vue) для больших SPA-проектов.

Доступность (важно)

• Используйте кнопку вместо div для гамбургера: это автоматически делает элемент фокусируемым и поддерживает клавиатуру.
• Применяйте aria-expanded и aria-controls для индикации состояния меню.
• Обновляйте aria-hidden у контейнера навигации.
• Обеспечьте закрытие меню клавишей Escape и фокус-менеджмент (возврат фокуса на кнопку).

Мини-методология разработки (шаги)

1. Создать базовую разметку и стили — отдельно подключаемые файлы.
2. Реализовать простую логику toggle в JS и протестировать локально.
3. Добавить aria-атрибуты и тесты клавиатурной навигации.
4. Протестировать в мобильных и десктопных браузерах.
5. Добавить анимации и улучшения по результатам UX-ревью.

Чеклист ролей

• Разработчик: синхронизировать классы, добавить обработчики событий, протестировать на разных браузерах.
• Дизайнер: определить размеры, межстрочные интервалы, цветовую схему и микровзаимодействия.
• Тестировщик: проверить клавиатурную навигацию, работу с экранными читалками и поведение при масштабировании.

Критерии приёмки

• Меню открывается/закрывается при клике по кнопке.
• aria-expanded отражает состояние меню.
• Меню закрывается при клике вне его области и при нажатии Escape.
• Навигационные ссылки доступны с клавиатуры.

Тесты/приёмо-сдаточные случаи

• Нажать на гамбургер — меню появляется.
• Нажать повторно — меню скрывается.
• Клик вне меню — меню скрывается.
• Нажать Escape — меню скрывается.
• Проверить с экранным читалкой: логика aria должна давать понять состояние меню.

Подсказки по улучшению интерфейса

• Анимируйте трансформацию полосок гамбургера в крестик при открытии.
• Добавьте overlay (полупрозрачный фон) при открытом меню для фокусировки внимания.
• Ограничьте ширину меню на мобильных экранах и используйте адаптивную типографику.

1-строчная глоссарий

• aria-expanded: атрибут указывает, раскрыт ли контролируемый элемент (true/false).

Итог

Вы реализовали базовое переключаемое мобильное меню без сторонних фреймворков. Такой подход даёт контроль над доступностью, анимацией и адаптацией под ваш дизайн. Дальше можно расширять функциональность — анимации, вложенные меню, интеграция с фреймворками.

Важно: всегда тестируйте поведение меню на реальных устройствах и с инструментами доступности.