Адаптивный дизайн стал неотъемлемой частью современной веб-разработки. Одна из важных его составляющих — адаптивное меню. В данной статье мы рассмотрим, как создать такое меню, используя HTML5, CSS и JavaScript.
Введение в адаптивку
Адаптивное меню — это меню, которое автоматически подстраивается под размер экрана устройства пользователя, будь то компьютер, планшет или смартфон. Это обеспечивает удобную навигацию и улучшает пользовательский опыт. Мы рассмотрим процесс создания пошагово, начиная с HTML-разметки и заканчивая использованием медиа-запросов и JavaScript.
Шаг 1: HTML-разметка
Начнем с создания базовой HTML-структуры для меню.
Создайте HTML-файл и вставьте следующий код:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Адаптивное Меню</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav class="navbar"> <div class="brand-title">Логотип</div> <a href="javascript:void(0);" class="toggle-button" id="toggle-button"> ☰ </a> <div class="navbar-links" id="navbar-links"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> <script src="scripts.js"></script> </body> </html>
В этом коде мы создаем основную структуру навигационного меню с элементами, которые будут использоваться для адаптации.
Шаг 2: стилизация с помощью CSS
Теперь создадим файл styles.css, чтобы стилизовать все элементы. Мы будем использовать медиазапросы для адаптации стилей под разные размеры экранов.
Создайте файл styles.css и вставьте следующий код:
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
}
.navbar .brand-title {
font-size: 1.5rem;
color: white;
}
.navbar-links ul {
display: flex;
list-style: none;
padding: 0;
}
.navbar-links li {
padding: 0 20px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 1.2rem;
}
.toggle-button {
display: none;
font-size: 1.5rem;
color: white;
background: none;
border: none;
}
@media (max-width: 768px) {
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
}
.navbar-links ul li {
text-align: center;
}
.toggle-button {
display: block;
}
}В этом фрагменте мы задаем основные стили и используем медиа-запрос для изменения поведения на экранах шириной менее 768 пикселей.
Шаг 3: Добавление JavaScript для интерактивности
Для интерактивности и функционала на мобильных устройствах, добавим немного JavaScript.
Создайте файл scripts.js и вставьте следующий код:
document.addEventListener('DOMContentLoaded', () => {
const toggleButton = document.getElementById('toggle-button');
const navbarLinks = document.getElementById('navbar-links');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
});
});В этом коде мы добавляем обработчик события для кнопки, который переключает класс active для элемента меню, тем самым управляя его видимостью.
Заключение
Мы рассмотрели процесс создания адаптивного меню, начиная с базовой HTML-разметки, стилизации с помощью CSS и заканчивая добавлением интерактивности с использованием JavaScript. Адаптивное меню позволяет улучшить пользовательский опыт на различных устройствах и сделать сайт более удобным и современным.
