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

CSS: Адаптивность сайта 41 сообщение
Обновлено: 07 марта, 23:20
490
Студентов
70%
Завершения

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

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

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

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

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

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

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

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

Задание

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

Размер иконки: 50px

Подсказки

  • Посмотреть финальные результаты на разных разрешениях можно в директории __tests_/_image_snapshots__
  • Иконка располагается в директории assets
  • В решении задания вам поможет псевдокласс checked
  • Реализуйте иконку через фоновое изображение у псевдоэлемента

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов