В данном испытании необходимо реализовать адаптивное меню «Гамбургер».
Суть такого меню очень простая: при заданной ширине экрана меню исчезает, а на его месте появляется иконка. Эта иконка обычно в виде трёх линий друг под другом. От внешнего сходства иконки со всеми известным блюдом такая реализация меню получила название «Гамбургер».
Сейчас меню адаптируется без скрытия пунктов меню. Ваша задача: при ширине меньше 500 пикселей скрывать меню, а на его месте выводить необходимую иконку. При клике на иконку под ней раскрывается меню.
Нераскрытое меню при ширине меньше 500 пикселей
Раскрытое меню при ширине меньше 500 пикселей
Реализация меню при ширине viewport более 500 пикселей должна остаться той же самой.
Задание
Реализуйте меню-гамбургер, используя связку label + checkbox, с помощью которых вы можете отслеживать клик по иконке с последующим раскрытием меню.
Размер иконки: 50px
Подсказки
- Посмотреть финальные результаты на разных разрешениях можно в директории __tests_/_image_snapshots__
- Иконка располагается в директории assets
- В решении задания вам поможет псевдокласс checked
- Реализуйте иконку через фоновое изображение у псевдоэлемента
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.