Как сделать мобильное меню выезжающее сбоку. Выдвигающееся боковое меню

Продолжаем делать выезжающее боковое меню по клику, в первой части урока была сделана HTML -разметка, стилизованы все селекторы, теперь осталось добавить JS динамику.

Обращаемся к библиотеке jQuery

$(".menu-icon").on("click", function(e) {

которая найдёт выезжающее меню с классом menu и применит метод toggleClass к меню. Метод toggleClass присваивает и удаляет классы у элемента.

$(".menu").toggleClass("menu_active");

При клике по иконке-бургеру слева выезжает меню . Теперь надо сделать так, чтобы контент отодвигался, уступая место меню. Для этого создадим новый класс section_active , который при событии будет двигать секцию с контентом на 25% вправо, как и меню.

Section_active {
transform: translateX(25%);
}

Добавим к селектору section плавность - transition в полсекунды. Чтобы секция не перекрывала собой иконку, то зададим ей позицию - relative , секция должна быть на нижнем слое - z-index: 0 .

Section {
transition: 0.5s;
position: relative;
z-index: 0;
}

Вытащим меню поверх секции

Menu {
z-index: 1;
}

Вернемся к jQuery , который найдет элемент section , присвоим ему класс section_active .

$("section").toggleClass("section_active");
})

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

Весь код + результат

Выезжающее меню справа

Menu {
left: 75%; /* вместо 0 */
transform: translateX(100%); /* вместо -100% */
}
и одно значение у секции при клике

Section_active {
transform: translateX(-25%); /* вместо 25% */

На данный момент с помощью jQuery можно сделать на сайте всё что угодно, нужно лишь определиться надо ли это вашему сайту. Мы все стремимся сделать сайт наиболее удобный для пользователя, чтобы ему было приятно перемещаться по сайту и это было максимально легко. Меню играет большую роль когда посетитель «гуляет» по вашему сайту. И в этом уроке мы создадим выдвигающееся меню, которое может прятаться и появляться когда это необходимо пользователю.

Также интересные выдвигающиеся меню:

Пример можно увидеть здесь:

Скачать

В этом уроке мы будем использовать jQuery плагин — «jQuery.mmenu.js». Его можно скачать по ссылке — скачать .

Как пользоваться?

HTML часть

Сперва подключим необходимые библиотеки и стили:

Затем определимся со структурой меню. Для примера, чтобы показать как оно работает, я сделаю меню с вложенными элементами. Но у вас оно может быть и более простое:

Немного выше меню вставим переключатель, чтобы пользователь мог открыть/закрыть его:

С HTML структурой закончили, сейчас переходим к стилям.

Существует масса готовых решений для создания таких панелей с помощью jQuery, отдельные плагины и модули для различных систем управления сайтом.
Это всё очень даже хорошо, но можно ли, для реализации боковых слайд-панелей обойтись исключительно средствами CSS? Конечно можно! Но осторожно))), с оглядкой на то, что не все браузеры одинаково хорошо поддерживают современные свойства CSS3.

Не так давно, «выдал на-гора» решение и пример работы . Один из первых комментариев был таким: «давайте её в бок переместим...». Почему-бы и нет? Давайте)).

Сегодня расскажу и покажу на примере, как с помощью «магии CSS» можно забабахать, вполне себе функциональное, меню, по клику.
Для начала, по заведённой традиции, смотрим живой пример работы панели, далее, вместе с теми кому оно надо, рассмотрим весь расклад, что, как и зачем. Предвидя вопросы, приготовил варианты расположения меню, как слева, так и справа:

HTML-Разметка

Начнём разбор с переключателя панели, в качестве которого используем стандартный флажок ():

Располагаем чекбокс в верхней части документа, лучше сразу после тега . Прописываем атрибут hidden , напрямую указывая состояние «скрытый» у данного элемента, а так же присвоим уникальный идентификатор, id="nav-toggle" например, для связки с атрибутом for тега , который мы оформим и будем использовать в виде кнопки переключения панели.

В качестве обёртки содержимого боковой панели использовал тег