Как сделать мобильную адаптацию меню? Есть много способов, один из них – использование библиотеки jQuery.
Рассмотрим меню, описанное в этом посте.К списку пунктов меню добавим иконку гамбургера, и обернем в тег nav.
Html-код теперь выглядит так:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link href="css/style.css" type="text/css" rel="stylesheet">
<title>Горизонтальное меню</title>
</head>
<body>
<div class="wrapper">
<header class="main-header">
<img class="logo" src="images/logo-example.png">
<nav>
<img class="hamburger" src="images/burger1.png">
<ul class="main-menu">
<li><a class="current-menu-item" href="">Главная</a></li>
<li><a href="">Блог</a></li>
<li><a href="">Портфолио</a></li>
<li><a href="">Обо мне</a></li>
<li><a href="">Контакты</a></li>
</ul>
</nav>
</header>
</div>
<script src="scripts/jquery-3.6.0.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
Перед закрывающим тегом body подключаются скрипты – сама библиотека jQuery и пользовательский файл стилей.
Файл стилей:
body {
background-color: #fff;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.wrapper {
width: 80%;
min-height: 500px;
background-color: #fff;
margin: 0 auto;
}
a {
text-decoration: none;
color: #8a8a8a;
}
a.current-menu-item {
color: goldenrod;
}
.logo {
width: 200px;
height: auto;
}
.main-header {
display: flex;
padding: 40px 20px;
justify-content: space-between;
align-items: center;
}
.main-menu {
display: flex;
justify-content: space-between;
}
.main-menu li {
margin-left: 30px;
}
.main-menu li a:hover {
text-decoration: underline;
}
.hamburger {
width: 60px;
height: auto;
display: none;
cursor: pointer;
}
@media screen and (max-width: 900px) {
.logo {
width: 150px;
}
}
@media screen and (max-width: 840px) {
.hamburger {
display: block;
margin-bottom: 20px;
}
.main-menu {
display: none;
flex-direction: column;
}
nav {
flex-direction: column;
}
.main-menu li {
margin-left: 0;
margin-bottom: 20px;
}
}
Здесь добавляются медиазапросы. При ширине экране меньше 940 пикселей появляется иконка гамбургера, а строчка меню исчезает. Когда меню появляется при нажатии на иконку, то оно из горизонтального превращается в вертикальное благодаря изменению свойства flex-direction.
Теперь надо написать скрипт, который по клику на иконку сделает меню видимым. Опять-таки, возможны варианты, но я выбрала такой:
$(document).ready(function($) {
$('.hamburger').click(function(){
var menu = $('.main-menu').css('display');
if (menu == 'none') {
$('.main-menu').css('display','flex');
}
else {
$('.main-menu').css('display','none');
}
});
});
Этот скрипт смотрит, какое свойство display у класса main-menu. Если меню видно, то при нажатии его надо скрыть, а если оно не видно, то наоборот – показать.
Результат можно посмотреть здесь.