Мобильный бургер

HTMLCSSJS

Макет

Макет в Figma (Animated Mobile App Navigation Side Menu Bar UI template)

📝 Задача

В этом задании вам предстоит сверстать адаптивное мобильное меню с иконкой-гамбургером и плавным выпадающим списком. Необходимо реализовать корректное открытие наложения (overlay) при клике и убедиться, что навигация удобно управляется на тач-экранах.

💡 Идеи для практики

1. Добавьте визуальный отклик при нажатии на пункты меню и реализуйте блокировку прокрутки основной страницы (overflow: hidden для body), когда меню открыто.
2. Используйте плавные переходы (transition) для появления меню и превращения «бургера» в крестик, чтобы интерфейс выглядел живым и отзывчивым.
3. Соблюдайте доступность (A11y): используйте семантический тег <nav> и убедитесь, что кнопка меню доступна для управления с клавиатуры и корректно считывается скринридерами.

🤔 FAQ

Оставьте ссылку на ваше решение в комментариях ниже, например на GitHub или на live-просмотр.

Спрашивайте совета у других участников сообщества в комментариях.

Безусловно! Одна из главных идей создания этой платформы — помочь разработчикам пополнить портфолио профессионально выглядящими проектами!

Мы не предоставляем «официальных» решений для заданий, потому что не существует единственно правильного способа выполнить задание. Вместо этого мы рекомендуем изучать код других участников сообщества. Вы многому научитесь, наблюдая, как другие люди подходили к тем же заданиям.

Twep.ru — это сообщество совместного обучения, где каждый может давать друг другу обратную связь. Если вы хотите получить отзывы от сообщества, обязательно задайте конкретный вопрос при отправке своего решения. Чем точнее вы сформулируете свой вопрос, тем выше вероятность получить полезные комментарии от других участников.

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