Как сделать бургер меню CSS?
Опубликовано вИнтересное IT Советы

Как сделать бургер меню CSS?

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

Что такое бургер-меню?

Бургер-меню (также известное как «гамбургер меню») — это иконка, которая обычно состоит из трех горизонтальных линий. При клике на эту иконку, пользователю открывается меню с навигационными ссылками. Эта концепция особенно популярна на мобильных устройствах, где экранное пространство ограничено.

Этапы создания бургер меню

1. HTML разметка

Первым шагом является создание базовой HTML-структуры. Она включает навигационные ссылки и саму иконку бургер-меню.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Бургер меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="burger-menu" id="burger-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul class="nav-links" id="nav-links">
            <li><a href="#">Головна</a></li>
            <li><a href="#">Про нас</a></li>
            <li><a href="#">Послуги</a></li>
            <li><a href="#">Контакти</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

2. Стилизация бургер меню с помощью CSS

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

/* Загальні стилі */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Стилі для навігаційної панелі */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #333;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-right: 20px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* Стилізація бургер-меню */
.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.burger-menu span {
    height: 4px;
    width: 25px;
    background-color: white;
    margin: 4px 0;
    transition: 0.3s;
}

/* Відображення бургер-меню на мобільних пристроях */
@media (max-width: 768px) {
    .burger-menu {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        right: 0;
        top: 60px;
        flex-direction: column;
        background-color: #333;
        width: 100%;
        text-align: center;
    }

    .nav-links li {
        margin: 15px 0;
    }

    .nav-links.active {
        display: flex;
    }
}

3. Добавление взаимодействия с помощью JavaScript

В завершение, чтобы сделать бургер-меню интерактивным, мы добавим немного JavaScript. Пользователи будут иметь возможность открывать и закрывать меню по клику.

// JavaScript для відкриття та закриття меню
const burgerMenu = document.getElementById('burger-menu');
const navLinks = document.getElementById('nav-links');

burgerMenu.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});

Детальный разбор кода

HTML структура

  • .navbar — контейнер для нашей навигационной панели.
  • .burger-menu — это иконка бургер-меню, которая состоит из трех span элементов, визуально представляющих линии.
  • .nav-links — список навигационных ссылок, который будет скрыт на мобильных устройствах и открываться при клике на бургер-меню.

CSS стили

  1. Основные стили для бургер меню: Мы используем три span элемента для создания горизонтальных линий. Они стилизованы с помощью флекс-контейнера, чтобы их легко было выровнять вертикально.
  2. Скрытие навигации на мобильных устройствах: С помощью медиа-запроса @media (max-width: 768px) мы изменяем поведение меню. На экранах, ширина которых меньше 768 пикселей, бургер-меню отображается, а навигационные ссылки скрыты.
  3. Анимация меню: В стиле .nav-links.active, когда добавляется класс active, меню отображается. Мы также используем плавные переходы, чтобы обеспечить красивый вид при открытии и закрытии меню.

Взаимодействие с JavaScript

JavaScript часть добавляет или удаляет класс active в списке навигации при клике на иконку бургер-меню. Это простой способ сделать меню интерактивным и управлять его состоянием.

Преимущества бургер-меню

  1. Удобство на мобильных устройствах: Бургер-меню позволяет эффективно использовать пространство на маленьких экранах.
  2. Чистый дизайн: Оно сохраняет чистый и минималистичный вид веб-сайта, не перегружая интерфейс лишними элементами.
  3. Легкость реализации: Это меню легко интегрировать в веб-сайт с минимумом кода.

Советы по улучшению UX с бургер-меню

  • Четкая индикация: Обеспечьте, чтобы иконка бургер-меню была узнаваемой и четко понятной для пользователей.
  • Плавные анимации: Используйте CSS-переходы, чтобы меню открывалось плавно и выглядело профессионально.
  • Доступность: Не забывайте о пользователях с ограниченными возможностями. Добавьте семантические атрибуты, такие как aria-label, чтобы улучшить доступность.

Бургер-меню — один из самых популярных инструментов для улучшения пользовательского интерфейса на мобильных устройствах. Его легко создать с помощью HTML, CSS и небольшого JavaScript-кода. В результате, вы получите компактное и удобное решение для навигации, которое не только улучшает UX, но и обеспечивает современный вид вашего сайта.

Следуя этому руководству, вы сможете быстро реализовать функциональное и стильное бургер-меню на вашем веб-сайте.

Создание бургер-меню без JavaScript (чистый CSS)

В современных проектах всё чаще используется подход с минимальным количеством JavaScript для повышения производительности и стабильности интерфейса. В 2026 году тренд на CSS-only решения остаётся актуальным, особенно для простых элементов интерфейса, таких как бургер-меню. Это уменьшает размер бандла, ускоряет загрузку и снижает вероятность ошибок.

Для реализации можно использовать скрытый checkbox и псевдокласс :checked. Такой способ позволяет управлять состоянием меню без JavaScript, сохраняя при этом интерактивность.

<nav class="navbar">
    <input type="checkbox" id="menu-toggle" hidden>
    
    <label for="menu-toggle" class="burger-menu">
        <span></span>
        <span></span>
        <span></span>
    </label>

    <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>

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        background: #333;
        width: 100%;
    }

    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }
}

Такой подход хорошо подходит для лендингов, корпоративных сайтов и небольших проектов. Для более сложной логики (например, закрытия меню при клике вне области) по-прежнему рекомендуется использовать JavaScript.

Доступность, производительность и современные UX-тенденции

В 2026 году доступность (accessibility) является обязательным стандартом при разработке интерфейсов. Бургер-меню должно быть полностью управляемым с клавиатуры. Рекомендуется добавлять атрибуты aria-expanded, aria-controls и логичную структуру фокуса. Также важно обеспечить достаточный контраст и размер кликабельной области не менее 44×44 px в соответствии с рекомендациями WCAG.

Согласно исследованиям Nielsen Norman Group и данным Baymard Institute за последние годы, скрытая навигация может снижать вовлеченность на десктопе, но на мобильных устройствах пользователи воспринимают бургер-иконку как стандарт. Поэтому в 2026 году часто применяется гибридный подход: на десктопе — полноценное меню, на планшетах и смартфонах — бургер.

Отдельное внимание стоит уделять производительности. Анимации лучше реализовывать через transform и opacity, поскольку они используют GPU-ускорение и обеспечивают более плавный рендеринг. Например, вместо изменения display можно использовать сдвиг меню через transform: translateX() с плавным переходом.

Также актуальной практикой является превращение трёх линий в иконку «X» при открытии меню. Это улучшает визуальную обратную связь и делает взаимодействие более понятным для пользователя. Такой эффект легко реализуется с помощью CSS-трансформаций и класса активного состояния.

Оновлено 10.03.2026

ChatGPT Perplexity Google (AI)