Как правильно сделать бургер?

Question

[Banny_Boom]

Меню стандартное на больших экранах:
Кнопка 1 | Кнопка 2 | Кнопка 3

на маленьких экранах скрывается меню и появляется бургер и меню делается таким:

Кнопка 1
Кнопка 2
Кнопка 3

по клику на бургер это меню показывается или скрывается ...

проблема при скрытии, скрыл масштабировал экран до большого, бургер исчез, а меню скрыто, как вернуть меню ?

можно было бы display: initial, но проблема в том что скрыть и показать меню делаю через style.display..
Как правильно все сделать?

Comments

[bushidos]

посмотрите, как это реализовано на getbootstrap.com

Answer 1

[Valery]

Показывайте и скрывайте меню через присвоение отдельного класса, например:

burger.on('click', function(){
    menu.toggleClass('visible')
})

И все будет гибко контролироваться через css

Comments

[Banny_Boom]

это я понимаю, но проблема в том, что меню должно скрыться по медиа запросу и показать бургер, в этом и проблема

[Valery]

Banny_Boom:
Стили для десктопа:

.burger { display: none; }
.menu { display: block; }

Стили для мобильных устройств:

@media all and (max-width: 320px){
    .burger { display: block; }
    .menu { display: none; }
    .menu.visible { display: block; }
}

Не вижу проблем: меню скрывается только на маленьких экранах и показывается при наличии класса visible. Остается им только манипулировать

Answer 2

[Иван]

goo.gl/rUJUiP