Как верстать гамбургер-меню?

Question

[Raul Abdullin]

Начинающий верстальщик, пока только HTML/CSS. Немного предыстории. Свой первый сайт сверстал на флексах, это была статичная верстка. Потом решил попробовал себя в адаптивной верстке на основе bootstrap-3, т.е. из всех компонентов бутстрапа только сетку вытащил, остальное мне не нужно. В целом всё получилось без проблем. Вот только одна загвоздка - гамбургер меню для маленьких экранов.

Подскажите пожалуйста, как имея небольшой опыт сделать это с наименьшими потерями?

Я получается для небольших экранов див с горизонтальной навигацией и кнопками в верхней панели спрятал с помощью display: none; Теперь нужно, чтобы вместо этого появилась иконка гамбургера меню при нажатии на которую будет открываться вертикальная навигация.

Answer 1

[STRAGER]

Неплохие гамбургер-кнопки можно взять из этой мини библиотеки, а принцип работы такой: при клике на гамбургер подставляешь класс is-active и так же подставляешь свой класс для меню навигации (если например он скрыт, то класс is-open, который показывает его). Удобнее всего скрывать меню через position: absolute и left/right -500+px, но помни, если ты меню скрываешь с правой стороны, тогда оно будет все равно видно и появится нижний скролл. Это нужно учесть и прописать overflow: hidden для родительского элемента.

Comments

[Raul Abdullin]

спабо большое за ссылку, но по поводу классов совсем ничего не понял, т.к. я умею только html и css. И по поводу скрытия тоже не совсем понял о чем идёт речь.