Адаптивное мобильное меню для сайта (часть 2)
В первой части урока мы сверстали логотип и меню для десктопных устройств. В чем проблема с меню навигации для планшетов и смартфонов? На маленьких экранах не помещаются все пункты меню в один ряд. Поэтому нашу верстку необходимо приспосабливать (адаптировать) к различным размерам экрана.
Это можно делать по разному и сегодня мы рассмотрим популярный метод адаптации меню навигации. Суть состоит в том, что на устройствах с размерами экранов до 1200 пикселей, вместо горизонтального меню появится кнопка, похожая на гамбургер. Клик по кнопке выкатит с правого боку вертикальное меню. Для пунктов меню, стоящих в столбик, нужно меньше места на экране (по ширине).
Расположим обертку menu-icon для линий кнопки под блоком с навигационным меню.
<div id="menu-toggle" class="menu-icon">
<div class="menu-icon-line"></div>
</div>
Кнопка гамбургер на CSS
Создадим обертку для линий у кнопки и сделаем изначально ее невидимой.
.menu-icon {
z-index: 2; // кнопка сверху других элементов
position: relative; // родитель для линий
display: none; // спрятали обертку
width: 30px;
height: 30px;
cursor: pointer;
}
Кнопка автоматически появится на экране с шириной от 0 до 1200 пикселей вместо навигационного меню.
@media (max-width: 1200px) {
.menu-icon {
display: flex;
justify-content: center;
align-items: center;
}
}
Построение линий гамбургера
CSS свойству transform зададим плавный переход при анимации верхней и нижней линий кнопки гамбургер при клике.
// Центральная линия
.menu-icon-line {
position: relative;
width: 30px;
height: 5px;
background-color: #fff;
}
// Верхняя линия
.menu-icon-line::before {
position: absolute;
left: 0;
top: -10px;
content: '';
width: 30px;
height: 5px;
background-color: #fff;
transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}
// Нижняя линия
.menu-icon-line::after {
position: absolute;
left: 0;
top: 10px;
content: '';
width: 30px;
height: 5px;
background-color: #fff;
transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}
При клике по кнопке будет происходить следующая анимация - центральная линия скроется, а две крайние линии трансформируются в крестик. Для этого мы создадим дополнительные классы со словом active на конце названий, в которых укажем угол поворота. При клике по элементу новые классы присвоются кнопке и тогда анимация сработает (посредством JavaScript). Процесс анимации мы сделаем более плавным, прописав нужные значения свойствам top и transform у свойства transition.
// убираем центральную линию через прозрачность
.menu-icon.menu-icon-active .menu-icon-line {
background-color: transparent;
}
// поворот верхней линии на 45 градусов
.menu-icon.menu-icon-active .menu-icon-line::before {
transform: rotate(45deg);
top: 0;
transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}
// поворот нижней линии на -45 градусов
.menu-icon.menu-icon-active .menu-icon-line::after {
transform: rotate(-45deg);
top: 0;
transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}
JavaScript код
Мы подготовили все необходимые классы для анимации кнопки гамбургер и приступим к программированию. Выберем на странице нужный элемент #menu-toggle и поместим его в переменную menuToggle. При клике по menuToggle сработает функция, которая добавит нашему элементу активный класс, а при повторном клике этот класс удалит. Метод toggle работает как переключатель классов, которые есть у этого элемента. Добавляет класс, если его нет у данного элемента и удаляет текущий класс.
const menuToggle = document.querySelector('#menu-toggle');
menuToggle.onclick = function(){
menuToggle.classList.toggle('menu-icon-active');
}
Теперь при одному клику кнопка превращается в крестик, а по другому клику, обратно в кнопку гамбургер для мобильной навигации.
На ширине экрана от 0 до 1200 пикселей скроем десктопное меню, вместо которого покажется кнопка гамбургер. Значит пропишем в медиа-запросе только то свойство, которое нужно изменить или добавить.
@media (max-width: 1200px) {
.nav {
display: none;
}
}
Третья часть урока выйдет в следующей статье.
-
Создано 10.04.2020 10:34:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.