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

Question

[Евгений Перин]

Есть такой макет

Это раскрытое меню в мобильной версии сайта. Под ним шапка сайта с кнопкой гамбургером, при нажатии на которую справа выплывает меню. Меню занимает всё видимое пространство, и если не помещается в экран то прокручивается.
Сайт сверстан на bootstrap3, сначала сделал модальным окном, но оно во первых выезжает сверху, во вторых на мобильном при прокрутки вниз, на миг из под меню выплывает шапка сайта, а потом скачком меню ставится на место (скачек из-за панели мобильного браузера).
Может знаете готовое решение на css/js для таких штук? В JS почти не разбираюсь

Answer 1

[Александр]

Одно из самых свежих решений с отличной производительностью: https://github.com/Mango/slideout

Comments

[Евгений Перин]

Я его смотрел, мне тоже понравилось, только непонятно насколько я его смогу кастомизировать без знаний JS, чтобы сделать кнопку Close... Сейчас установлю, поковыряю

[Александр]

Евгений Перин: более простой вариант с jquery вместо чистого js, но все с теми же css трансформациями: codepen.io/scottb/pen/javhr

[Евгений Перин]

Александр: Вот вторым способом осилил сделать, осталось сделать чтобы не слева а справа выезжало, это какие параметры нужно менять?) Спасибо

[Евгений Перин]

Александр: А всё, с этим тоже справился!

[Евгений Перин]

Александр: Еще такая проблема возникла, если делает выезжание слева, то при закрытом меню всё хорошо. Если делать выезжание справа, то при закрытом меню оно всё равно есть, если прокрутить страницу вправо, то есть появляется вертикальный скролл

[Евгений Перин]

Это тоже решил добавив для #page overflow: hidden; а для .openNav #page overflow: visible;
Только при закрытии меню оно резко пропадает, не успев свернуться

[Александр]

Евгений Перин: удачи)

[Mary Солнечная]

Вы не подскажите как сделать так, чтобы это боковое меню не сдвигало весь контент, а поверх всего контента ложилось?

Answer 2

[Igor Feren]

Плагин для вордпресс Ninja Kick: Sliding Panel
Демо здесь