Испытания

Меню «Гамбургер»

CSS: Адаптивность

В данном испытании необходимо реализовать адаптивное меню «Гамбургер».

Суть такого меню очень простая: при заданной ширине экрана меню исчезает, а на его месте появляется иконка. Эта иконка обычно в виде трёх линий друг под другом. От внешнего сходства иконки со всеми известной пищей такая реализация меню получила название «Гамбургер».

Сейчас меню адаптируется без скрытия пунктов меню. Ваша задача: при ширине меньше 500 пикселей скрывать меню, а на его месте выводить необходимую иконку. При клике на иконку под ней раскрывается меню.

Нераскрытое меню при ширине меньше 500 пикселей

Нераскрытое меню при ширине меньше 500 пикселей

Раскрытое меню при ширине меньше 500 пикселей

Нераскрытое меню при ширине меньше 500 пикселей

Реализация меню при ширине viewport более 500 пикселей должна остаться той же самой.

Задание

Реализуйте меню-гамбургер, используя связку label + checkbox, с помощью которых вы можете отслеживать клик по иконке с последующим раскрытием меню

Подсказки

  • Посмотреть финальные результаты на разных разрешениях можно в директории __tests__/__image_snapshots__

  • Иконка располагается в директории assets

Успешных завершений: 52%

Последние код-ревью

Автор Дата обновления Версий
aldangold 30 июня, 13:49 1
sanyativporyadke 25 июня, 13:15 1
aleksey19988 19 июня, 08:21 1
user-69c0c74cca7a47f0 20 июня, 10:08 3
user-31d24a045d82e6e6 16 июня, 07:51 1