Сейчас редко можно встретить сайт у которого не адаптивное меню, но это статья для тех, кто еще не сделал на своем интернет ресурсе. А это по клику значка сворачивание и разворот навигация, когда экран становится меньше. И результат должен быть такой, по умолчанию стоит значjк, по клику навигация разворачивается и значjк меняется в крестик и показывает все категорий меню и также под разделы, если они на сайте есть.
Меню для больших экранов
Для начала сверстаем обычное меню для «большого» разрешения (в нашем случае это будет разрешение экрана 1000px и больше). Для этого создадим следующую структуру HTML:
Код
<div class="menu">
<div class="menu__links">
<a class="menu__links-item" href="/">Item 1</a>
<a class="menu__links-item" href="/">Item 2</a>
</div>
</div>
И добавим необходимые стили:
Код
.menu {
text-align: right;
}
.menu__links-item {
display: inline-block;
color: #333333;
font-family: Arial;
font-size: 14px;
line-height: 30px;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
}
.menu__links-item:hover {
text-decoration: underline;
}
Мы добавили два пункта меню и стилизовали их так, как нам нужно.
Адаптация для мобильных устройств
Здесь как раз будем добавлять кнопку, которая под функцией на разворот меню, что должно по клику разворачиваться. Если у вас ширина больше 1000 пикселей, то меню будет отображаться по умолчанию.
В HTML структуру добавим иконку:
Код
<div class="menu__icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
И напишем для нее стили:
Код
.menu__icon {
display: none;
width: 45px;
height: 35px;
position: relative;
cursor: pointer;
}
.menu__icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #333333;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.menu__icon span:nth-child(1) {
top: 0px;
}
.menu__icon span:nth-child(2), .menu__icon span:nth-child(3) {
top: 13px;
}
.menu__icon span:nth-child(4) {
top: 26px;
}
Обратите внимание на правило display: none; для класса .menu__icon — по умолчанию иконка должна быть не видна.
Для маленьких экранов добавим дополнительные правила: во-первых, нам нужно показать иконку, во-вторых — доработать стили и скрыть меню, в-третьих, добавить стили для элементов меню:
Код
@media screen and (max-width: 999px) {
.menu__icon{
display: inline-block;
}
.menu__links {
position: fixed;
display: block;
top: 0;
right: 0;
left: 0;
margin-top: 52px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow: auto;
opacity: 0;
}
.menu__links-item {
display: block;
padding: 10px 0;
text-align: center;
color: #ffffff;
}
}
Теперь верстка меню работает как нужно, остался последний шаг — показывать меню при клике на иконку.
Реализация логики меню
Чтобы показать меню при клике на иконку, добавим JavaScript
(function($){
$(function() {
$('.menu__icon').on('click', function() {
$(this).closest('.menu').toggleClass('menu_state_open');
});
});
})(jQuery);
В коде выше мы всего лишь переключаем класс .menu_state_open у элемента .menu при нажатии на иконку.
И наконец, добавим стили для открытого состояния меню.
.menu.menu_state_open .menu__icon span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
.menu.menu_state_open .menu__icon span:nth-child(2) {
transform: rotate(45deg);
}
.menu.menu_state_open .menu__icon span:nth-child(3) {
transform: rotate(-45deg);
}
.menu.menu_state_open .menu__icon span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu.menu_state_open .menu__links {
opacity: 1;
}
И посмотреть, что получиться:
See the Pen QdYOGX by Ekaterina Nazarova (@katienazarova) on CodePen.
Источник: Getinstance.info
