Выезжающее боковое меню. Часть 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.
-
Создано 11.07.2018 10:14:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.