Skip to main content

Меню навигации

Опубликовано: Konkin 26.05.2019 - 12:14
GruzService вёрстка menu
LESS/CSS/HTML
~0.25ч
~150р

Навигация в мобильной версии

По техническому заданию, мобильное меню должно быть максимально простым. Эта задача выполнима!

Mobile menu

Для реализации, нам не понадобится ничего, кроме чистого CSS, и пару строк HTML в шаблон page.tpl.php. Способ основан на работе атрибута и псевдокласса checked, который выступает в качестве переключателя. Так как, атрибут может быть в одном из двух состояний (выбран\не выбран), можем задать разные стили каждому состоянию.

Боковой элемент

Элемент Aside - боковой блок, на снимке черным цветом, задвинут за левую грань монитора отрицательным margin в значении -100%, если кнопка меню нажата (checked выбран), то значение margin сбрасывается в 0 и срабатывает фиксированное позиционирование блока aside, что позволяет ему отображаться в отрыве от основного потока элементов. Если кнопка нажата еще раз (checked не выбран), то margin переходит в значение -100% влево. Таким образом мы получаем выезжающее слева, боковое мобильное меню, осталось только подвесить анимацию, для плавного появления и скрытия меню, а так же анимировать кнопку бургер.

Продолжение: С чего все начиналось