Как сделать адаптивное боковое выезжающие меню?

Question

[Mymacom]

Всем привет. Есть push и slide menu, они выезжают сбоку. Slide menu - поверх контента, а Push menu сдвигает контент. Как сделать такие меню адаптивными?
Адаптивным - при маленьком разрешении в гамбургер, при нормальном просто в строчку.
Знаю, что медиа скрин, но навыков не хватает.
Push - https://codepen.io/chrissova/pen/OVgPNP
https://codepen.io/SuperManEver/pen/aOwgwm
Slide - https://codepen.io/ngannguyen/pen/KqBXeX
https://codepen.io/EKuhn/pen/wzGVkk

Comments

[Ankhena]

По простому так: https://jsfiddle.net/02Ljms7g/ У меня перестроение на ширине 500, просто для наглядности, поставьте сколько нужно.

Не стоит дублировать меню, если нет принципиальных различий в его структуре.

На мобильной ширине цепляете свой скрипт для бургера.

Answer 1

[udzumaki]

я не через медиа скрин не умею

/*отображается бургер-меню на телефонах но не отобоажется обычное меню в строку*/
@media screen and (max-width: 775px){
.wrapper-burger-menu{display: block;}
.wrapper-char-menu{display: none;}
}

/* Не отображается бургер-меню но отображается строковое меню на компьютерах */
@media screen and (min-width: 1200px){
.wrapper-burger-menu{display: none;}
.wrapper-char-menu{display: block}
}

.wrapper-char-menu - строковое меню
(min-width: 1200px) - минимальное разрешение в 1200 пикселей
(max-width: 775px) - макс разрешение у 720 пикселей
media screen and - обычный синтаксис медиа запросов

Мои запросы просто меняют свойсто display у меню в зависимости от разрешения экрана пользователя который зашел на ваш сайт

Если что-то не понял пиши в коменты

Comments

[Mymacom]

Как я понимаю .wrapper-burger-menu и .wrapper-char-menu это классы. Получается у каждого должен быть отдельный код?

[udzumaki]

Mymacom, да,ты должен добавить 2 меню на страницу и каждое обернуть в эти классы