Как создать адаптивное меню навигации с помощью медиа-запросов CSS?
Создание адаптивного меню навигации — важная задача для фронтенд-разработчика. Это меню должно хорошо выглядеть и быть функциональным не только на компьютерах, но и на мобильных устройствах. Использование медиа-запросов позволяет легко изменять стили в зависимости от размера экрана.
Шаги по созданию адаптивного меню навигации:
- Создание HTML структуры: Начнем с создания базовой структуры меню.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Адаптивное меню навигации</title>
</head>
<body>
<nav class="navbar">
<div class="logo">Логотип</div>
<ul class="nav-links">
<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>
<div class="menu-toggle">Меню</div>
</nav>
</body>
</html>
- Добавление CSS стилей: Создадим стили для навигационного меню.
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px 20px;
}
.logo {
color: white;
font-size: 24px;
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links li {
display: inline;
}
.nav-links a {
text-decoration: none;
color: white;
}
.menu-toggle {
display: none;
color: white;
cursor: pointer;
}
/* Медиа-запросы для мобильных устройств */
@media (max-width: 768px) {
.nav-links {
display: none; /* Скрыть навигационные ссылки по умолчанию на мобильных устройствах */
flex-direction: column;
width: 100%;
position: absolute;
background-color: #333;
top: 60px; /* Позиционирование под меню */
left: 0;
}
.nav-links.active {
display: flex; /* Отображение для активного состояния */
}
.menu-toggle {
display: block; /* Отображение кнопки меню */
}
}
- Добавление JavaScript для интерактивности: Теперь добавим немного JavaScript, чтобы сделать меню интерактивным.
<script>
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
</script>
Объяснение кода:
- HTML: Простая структура, которая включает логотип и навигационные ссылки. Кнопка меню (
menu-toggle) будет использована для открытия и закрытия меню на мобильных устройствах. - CSS:
- Мы используем Flexbox для расположения элементов в навбаре.
- На экранах шириной менее 768 пикселей мы скрываем навигационные ссылки по умолчанию и отображаем кнопку для их открытия.
- JavaScript: Добавляет функциональность для кнопки меню, позволяя отображать и скрывать навигационные ссылки.
Заключение
Теперь вы знаете, как создать адаптивное меню навигации, используя медиа-запросы CSS, и как добавить простую интерактивность с помощью JavaScript. Попробуйте изменить стили и структуру в зависимости от ваших нужд и сделайте меню уникальным!