Генератор адаптивного меню

Генератор адаптивного меню: для чего нужен

Любому сайту нужно меню, работающее на компьютере и на телефоне. Этот генератор собирает навигационное меню с вашими ссылками: в ряд на больших экранах и с кнопкой-бургером ниже выбранной вами точки перелома.

Код следует правилам доступности: элемент nav с подписью, кнопка с aria-expanded и aria-controls, закрытие клавишей Esc и при нажатии на ссылку, а анимация иконки учитывает настройку уменьшения движения. В предпросмотре результат показан сразу в размере компьютера и телефона.

Как пользоваться

1. Напишите название сайта и ссылки.
2. Выберите цвета, точку перелома и будет ли последняя ссылка кнопкой.
3. Скопируйте HTML, CSS и JavaScript или скачайте пример страницы.

Когда использовать

• Корпоративный сайт, сделанный вручную.
• Лендинг без фреймворка.
• Замена старого меню, не работающего на телефоне.

Частые вопросы

Доступно ли меню?

Да. Кнопка — элемент button с aria-expanded и aria-controls, меню закрывается клавишей Esc и при щелчке по ссылке, а навигация находится внутри элемента nav с aria-label. Работает с клавиатурой и программами чтения с экрана.

Работает ли без JavaScript?

На компьютере — да: ссылки всегда видны. На телефоне кнопке для открытия нужен JavaScript; поэтому код скрывает ссылки, только когда скрипт загрузился (класс js в html), а без скрипта они отображаются друг под другом.

Какую точку перелома выбрать?

Примерно до пяти коротких ссылок хорошо подходит 768 px. При большем числе ссылок или длинных названиях поднимите до 960 или 1024 px, чтобы пункты не сжимались до превращения в бургер.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты