Гамбургер-меню или бургер-меню — это более компактный вариант меню-бара, обычно представляющий из себя иконку или три горизонтальные линии. Он позволяет скрыть основное меню сайта, освобождая пространство для контента и сохраняя быстрый доступ к навигации.
Хоть изначально гамбургер-меню разрабатывалось для мобильных интерфейсов, сегодня его используют и в других адаптивах, если того требует дизайн сайта. Однако, стоит учитывать, что когда мы скрываем навигацию, это всегда усложняет пользовательский путь, поэтому важно подходить к использованию данного вида меню осмысленно.
Компоненты гамбургер-меню
Система меню состоит из двух и иногда трех частей: кнопки с иконкой, панели с навигацией и изредка области затемнения. Нужно следить за тем, чтобы кнопка бургера была всегда видна пользователю. При активации она должна трансформироваться в кнопку закрытия.
Виды раскрытия
Видов раскрытия достаточно много. При клике на иконку панель навигации должна «выехать» на страницу. Обычно она выезжает с левого или с правого края экрана, реже сверху или просто перекрывает весь экран. Контент на странице стоит оставить неподвижным, но, если того требует ваша задумка, он может сдвинуться в сторону.
Внутренняя структура
Во внутреннюю структуру бургер-меню стоит включить иконку закрытия, основную область с пунктами навигации, которые могут иметь вложенные уровни с отступами и индикаторами раскрытия, как в случае с обычным меню-баром, и нижнюю часть с дополнительной информацией, контактами и ссылками на соцсети.
Анимация открытия
При нажатии на иконку линии плавно трансформируются в крестик, одновременно выезжает панель и при необходимости происходит затемнение остального контента. Все анимации следует синхронизировать, чтобы создать эффект единого действия.
Взаимодействие с меню
Открытое меню можно закрыть, коснувшись затемненной области, свайпом в сторону или кнопкой закрытия. Вложенные пункты раскрываются с плавным сдвигом содержимого, сохраняя историю навигации.
Индикация состояний
Активные разделы визуально выделяются, чтобы пользователь всегда мог вспомнить, где он находится. Кроме того, можно добавить текущий путь в шапку панели, чтобы сильнее улучшить ориентирование.
Мобильная версия
На мобильных устройствах панель должна занимать весь или почти весь экран, оставляя небольшой отступ для видимости фона. Пункты меню стоит увеличить для удобства нажатия и продумать возможность реализации свайпов.
Планшетная версия
На планшетах панель становится уже, оставляя больше места для контента, поэтому у вас появляется возможность фиксировать панель в открытом состоянии. Как и на мобильных устройствах, при создании элемента нужно помнить про сенсорное управление.
Десктопная версия
На больших экранах гамбургер-меню может служить альтернативой основной навигации или дополнительным меню. Панель может быть фиксированной ширины или адаптироваться под контент.
