Гамбургер-меню – это распространенный элемент веб-дизайна, представляющий собой иконку с тремя горизонтальными полосками. При нажатии на эту иконку открывается меню навигации, что особенно полезно на мобильных устройствах с ограниченным пространством экрана. В этой статье мы рассмотрим, как создать гамбургер-меню на сайте с использованием HTML, CSS и JavaScript.
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
Создание разметки
Для начала создадим HTML-разметку для нашего гамбургер-меню. Нам понадобится контейнер для меню и сама иконка гамбургера.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Гамбургер-меню</title>
</head>
<body>
<nav>
<div class="hamburger-menu">
<div class="hamburger"></div>
</div>
<ul class="nav-links">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>
</body>
</html>
Стилизация
Теперь применим стили к нашему меню с помощью CSS. Сначала зададим стили для иконки гамбургера, а затем – для меню навигации.
body {
margin: 0;
font-family: Arial, sans-serif;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 0 1rem;
}
.hamburger-menu {
display: none;
}
.hamburger {
width: 30px;
height: 3px;
background-color: white;
margin: 5px;
}
.nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.nav-links li a {
color: white;
text-decoration: none;
padding: 1rem;
}
/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
.hamburger-menu {
display: block;
}
.nav-links {
display: none;
}
}
На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.
Добавление функциональности
И, наконец, добавим функциональность нашему гамбургер-меню с помощью JavaScript. Создадим функцию, которая будет открывать и закрывать меню при клике на иконку гамбургера.
document.querySelector(".hamburger-menu").addEventListener("click", () => {
document.querySelector(".nav-links").classList.toggle("show-menu");
});
Теперь у нас есть гамбургер-меню, которое открывается и закрывается при нажатии на иконку. 🎉
Не забудьте подключить ваш CSS и JavaScript файлы к HTML файлу.
<head>
...
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
Вот таким образом можно создать гамбургер-меню на сайте с использованием базовых технологий веб-разработки. Этот пример может быть отправной точкой для дальнейшей кастомизации и улучшения меню в соответствии с требованиями вашего проекта.
Если вы хотите углубить свои знания в веб-разработке, рекомендую ознакомиться с .
Добавить комментарий