Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
02 Июн 2023
3 мин
7116

Как создать гамбургер-меню на сайте

Узнайте, как создать гамбургер-меню на сайте с помощью HTML, CSS и JavaScript, делая навигацию удобнее для мобильных устройств.

Гамбургер-меню – это распространенный элемент веб-дизайна, представляющий собой иконку с тремя горизонтальными полосками. При нажатии на эту иконку открывается меню навигации, что особенно полезно на мобильных устройствах с ограниченным пространством экрана. В этой статье мы рассмотрим, как создать гамбургер-меню на сайте с использованием 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", () =&gt; {
    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>

Вот таким образом можно создать гамбургер-меню на сайте с использованием базовых технологий веб-разработки. Этот пример может быть отправной точкой для дальнейшей кастомизации и улучшения меню в соответствии с требованиями вашего проекта.

Если вы хотите углубить свои знания в веб-разработке, рекомендую ознакомиться с .

Тест на профориентацию
За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии
Подробнее
Тест на профориентацию

Добавить комментарий