Выезжающее боковое меню. Часть 2

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

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

Находим ссылку с классом menu-icon, внутри которой иконка-бургер и когда произойдет событие onclick, выполнится функция,

$('.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');
})

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

Хотите научиться создавать красивые и динамические сайты? Посмотрите мой видео-курс.

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

See the Pen CSS3 left menu + jQuery by porsake (@porsake) on CodePen.

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

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

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

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

Весь код меню справа + результат

See the Pen CSS3 right slide menu by porsake (@porsake) on CodePen.