Разработка адаптивного меню сайта

Общие технические требования

  • Использовать ванильные HTML, CSS и JavaScript. Допускаются небольшие вспомогательные библиотеки, но основной код должен быть чистым, хорошо структурированным и с комментариями.
  • Поддержка последних версий браузеров: Chrome, Edge, Safari, Firefox.
  • Меню должно быть полноэкранным по высоте. При открытом подменю скролл страницы блокируется.
  • Анимация открытия и закрытия выполняется через opacity и translateX.
  • Использовать понятную методологию именования CSS-классов для лёгкой поддержки.

Десктопная версия (широкие экраны)

  • Подменю открываются по клику на пункте-родителе.
  • При клике вне области подменю они закрываются. Наложен затемняющий фильтр.
  • По умолчанию меню статично или наложено на первый блок контента. Как только пользователь проскроллит на 100% высоты экрана, меню фиксируется сверху.

Планшетная версия

  • Клик по гамбургеру (справа) открывает основное боковое меню (фиксированной ширины).
  • Клик по пункту с подменю открывает второй уровень справа, перекрывая основной уровень.
  • Во втором уровне присутствует кнопка «Назад», которая возвращает к предыдущему уровню.
  • Иконка гамбургера и крестик используются для открытия и закрытия меню соответственно.

Мобильная версия

  • Меню открывается на всю ширину и высоту экрана.
  • Поведение при скролле и блокировка прокрутки аналогичны десктопной версии.

Дизайн и макет

Всё вёрстается строго по предоставленному макету в Figma. Конкретные ссылки и контакты удалены из описания.

Ожидаемый результат

  • Рабочий адаптивный код с разделением на три брейкпоинта: десктоп, планшет, мобильный (плюс промежуточные значения).
  • Поддержка всех современных функций без устаревших polyfill.
  • Читаемый, хорошо документированный код.