В наше время, если отсутствует адаптивная верстка, то сайт на 50% плох. Именно поэтому сейчас частое явление и необходимое - это адаптивное меню под все устройства. Адаптивное меню, это когда меню скрывается и становится кнопкой, при нажатии на которую затем оно появляется, тем самым не загораживая вид сайта с мобильных устройств.
При нажатии появляется само меню, а его иконка становится крестиком, если на него нажать, меню закроется - всё просто.
Меню для PC и прочих устройств с большим экраном.
Для начала сверстаем обычное меню для «большого» разрешения (в нашем случае это разрешение экрана 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>
Далее добавляем необходимые стили CSS:
Код
.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;
}
Сейчас мы добавили два пункта меню и стилизовали их так, как нам нужно, следующим шагом приступаем к адаптации меню под мобильные устройства.
Адаптация для мобильных устройств
Сейчас мы как раз будем добавлять кнопку, при нажатии которой наше меню будет появляться и скрываться.
Если же ширина Вашего экрана более чем 1000px включительно, то меню будет отображаться как обычное.
В 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;
}
Также пропишем небольшой скрипт:
Код
<script type="text/javascript">(function($){
$(function() {
$('.menu__icon').on('click', function() {
$(this).closest('.menu').toggleClass('menu_state_open');
});
});
})(jQuery);</script>
Теперь смотрим что у нас получилось (правое окошко):
See the Pen QdYOGX by Ekaterina Nazarova (@katienazarova) on CodePen.
