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