Адаптивное меню гамбургер
На прошлом уроке, мы создали анимацию для кнопки гамбургер, без привязки к меню. На этом уроке привяжем к нашей кнопке адаптивное меню.
На мобильных устройствах, при нажатии на кнопку гамбургер, слева выкатится навигационная панель с ссылками меню, при повторном нажатии, меню уберется обратно, за пределы видимости браузера.
В чем состоит фокус появления и исчезновения меню? Только CSS, а точнее конкретное его свойство:
left: -100vw;
Создается блок с классом menu, где мы позиционируем его с отрицательным значением при заданным position: fixed. Единицы измерения vw, указывают на ширину относительно браузера, где 1vw равен 1% текущего браузера. Получается, что меню находится за пределами браузера с левой стороны и занимает 100% ширины браузера, но пока спрятано.
Создается активный класс меню menu-active с нулевой позицией. При этой позиции блок меню занимает всю видимую часть браузер.
left: 0;
Когда происходит клик по кнопке, к классу menu добавляется активный класс menu-active и блок выдвигается, но об этом поговорим чуть позже.
Выезжающее мобильное меню
По умолчанию это меню спрятано, пока нет клика по кнопке гамбургер.
HTML разметка
<nav class="menu">
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#benefit">Выгода</a></li>
<li><a href="#portfolio">Примеры</a></li>
<li><a href="#price">Цены</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
CSS код
/* Вертикальное меню спрятано */
.menu{
display: flex;/* технология флексбокс */
align-items: center; /* выравнивание по центру */
justify-content: center; /* выравнивание по центру */
background-color: #e38ec9;
width: 100vw; /* ширина блока меню */
z-index: 10;/* слой ниже кнопки */
position: fixed; /* блок зафиксирован */
left: -100vw;/* скрывание блока с меню */
top: 0; /* позиция от левого верха */
transition: all 0.5s;/* плавное выдвижение блока */
opacity: .95;/* блок имеет прозрачность */
}
/* Активный класс меню видимое */
.menu-active{
left: 0; /* блок с меню видимый */
}
/* Стилизация списка меню */
ul {
list-style: none; /* убрать маркеры */
padding: 0;
margin-top: 60px;
height: 100vh; /* блок занимает всю высоту браузера */
}
/* Стилизация ссылок меню */
a{
display: block; /* из строчного в блочный */
color: #6f2d35;
line-height: 50px;
text-decoration: none;
font-family: Roboto;
font-size: 20px;
font-weight: bold;
letter-spacing: 3px;
transition: all 0.3s;
width: 100vw; /* блоки с ссылками на всю ширину */
display: flex;
justify-content: center; /* выравнивание по центру */
}
/* Эффект наведения мыши на ссылки */
a:hover{
background-color: #efc5fa;
width: 100vw;
}
JQuery код
Если в документе присутствует jQuery код, значит в обязательном должна быть подключена библиотека jQuery. У нас имеется два класса с разным позиционированием блока сменю, осталось только написать функцию переключающую эти два класса при клике по кнопке гамбургер.
$('.gamburger').click(function(){
$('.menu').toggleClass('menu-active');
});
Расшифруем код выше. При клике по элементу с классом gamburger, сработает функция (некий набор действий) – "Метод toggleClass добавляет блоку с классом меню активный класс menu-active, если его нет и удаляет этот класс, если он уже есть."
Мы выполнили программу минимум, однако не хватает реалистичности, меню как-бы повисло в воздухе. Зачем выдвигать навигационное меню, если не кликать по ссылкам этого меню? И еще при переходе по ссылкам и попадая на страницы сайта, меню должно снова исчезать.
Предположим, что у нас одностраничник, добавим ему пять секций с заголовком и параграфом.
<section id="home">
<h1>Главная</h1>
<p>здесь будет текст..</p>
</section>
<section id="benefit">
<h1>Выгода</h1>
<p>здесь будет текст..</p></section>
<section id="portfolio">
<h1>Примеры</h1>
<p>здесь будет текст..</p>
</section>
<section id="price">
<h1>Цены</h1>
<p>здесь будет текст..</p></section>
<section id="contact">
<h1>Контакты</h1>
<p>здесь будет текст..</p></section>
Добавим немного стилей.
/* Обертка для всего документа */
#wrap {
width: 100vw; /* на всю ширину браузера */
margin: 1% auto;/* отступ от верха и гор. выравнивание */
}
/* Отступы для секций */
section{
padding: 10px 70px; /* поля вокруг секций */
Мы хотим, чтобы при клике по ссылке меню с якорем #price, пользователя перекидывало на секцию с id="price", а панель с меню, задвигалась бы и не мешала смотреть контент.
jQuery код
Пишем функцию для ссылок меню.
$('.menu a').click(function() {
$('.menu').removeClass('menu-active');
});
При клике по ссылке меню a, удалить активный класс menu-active у блока с классом .menu.
-
Создано 29.04.2019 10:03:15
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.