Адаптивные меню играют важную роль в современном веб-дизайне, позволяя пользователям легко навигировать по сайту на различных устройствах, включая мобильные телефоны, планшеты и настольные компьютеры. В этом руководстве мы рассмотрим, как создавать адаптивные меню с помощью CSS.
Сначала давайте создадим базовую структуру HTML для нашего меню:
<nav>
<ul class="menu">
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
Теперь добавим CSS для стилизации нашего меню. Начнем с базовых стилей:
nav {
background-color: #333;
}
.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
.menu li {
margin: 0;
}
.menu a {
display: block;
padding: 14px 20px;
color: white;
text-decoration: none;
}
.menu a:hover {
background-color: #575757;
}
Этот код создает горизонтальное меню с плавающим фоном и белым текстом. Теперь давайте добавим адаптивность. Для этого мы будем использовать медиазапросы.
Добавим медиазапросы, чтобы изменить стиль меню на мобильных устройствах:
@media (max-width: 768px) {
.menu {
flex-direction: column;
align-items: center;
}
}
С помощью этого медиазапроса мы изменяем направление меню на вертикальное при ширине экрана менее 768 пикселей. Теперь давайте добавим кнопку для открытия и закрытия меню на мобильных устройствах.
Обновим HTML код:
<nav>
<div class="menu-toggle">Меню</div>
<ul class="menu">
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
Теперь добавим стили для кнопки и скрыть меню по умолчанию на мобильных устройствах:
.menu-toggle {
display: none;
cursor: pointer;
color: white;
padding: 14px 20px;
}
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
align-items: center;
}
.menu-toggle {
display: block;
}
}
Теперь добавим немного JavaScript, чтобы сделать кнопку функциональной:
<script>
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('active');
});
</script>
И добавим стили для активного состояния меню:
.menu.active {
display: flex;
}
Теперь у нас есть адаптивное меню, которое можно открыть и закрыть на мобильных устройствах. Полный код HTML будет таким:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивное меню</title>
<style>
nav {
background-color: #333;
}
.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}
.menu li {
margin: 0;
}
.menu a {
display: block;
padding: 14px 20px;
color: white;
text-decoration: none;
}
.menu a:hover {
background-color: #575757;
}
.menu-toggle {
display: none;
cursor: pointer;
color: white;
padding: 14px 20px;
}
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
align-items: center;
}
.menu-toggle {
display: block;
}
}
.menu.active {
display: flex;
}
</style>
</head>
<body>
<nav>
<div class="menu-toggle">Меню</div>
<ul class="menu">
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
<script>
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('active');
});
</script>
</body>
</html>
Теперь, когда вы открываете меню на мобильном устройстве, оно будет отображаться корректно, а пользователи смогут легко навигировать по вашему сайту. Это основа создания адаптивного меню с помощью HTML, CSS и JavaScript.
В дальнейшем вы можете добавлять более сложные элементы, такие как подменю, анимацию открытия и закрытия, или изменять стили в зависимости от темы вашего сайта. Главное — не забывайте тестировать ваше меню на разных устройствах и разрешениях экрана.