Як зробити бургер меню CSS?
Опубліковано уІТ Поради Цікаве

Як зробити бургер меню 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

Станом на 2026 рік усе більше розробників надають перевагу підходам із мінімальною залежністю від JavaScript для базового функціоналу інтерфейсу. Це пов’язано з продуктивністю, швидкістю завантаження та кращою стабільністю при повільному інтернет-з’єднанні. Бургер-меню можна реалізувати повністю на CSS за допомогою псевдокласу :checked або елемента <details>, що дозволяє зробити меню інтерактивним без додаткових скриптів.

Один із найпоширеніших методів — використання прихованого чекбокса. Коли користувач натискає на стилізовану іконку (label), змінюється стан чекбокса, і через CSS відображається меню. Це зменшує кількість виконуваного коду в браузері та позитивно впливає на показники Core Web Vitals, зокрема Interaction to Next Paint (INP), який у 2026 році залишається важливою метрикою ранжування.

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

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

Такий підхід є простим, добре підтримується сучасними браузерами та підходить для невеликих і середніх проєктів. Крім того, відсутність JavaScript спрощує підтримку коду та зменшує ризик конфліктів із іншими скриптами на сторінці.

Доступність і мобільна зручність у 2026 році

У 2026 році вимоги до доступності вебінтерфейсів значно зросли. Згідно з рекомендаціями WCAG 2.2, інтерактивні елементи повинні мати достатню площу для натискання (мінімум 24×24 px, а краще — 44×44 px для мобільних пристроїв). Це означає, що бургер-іконка повинна мати достатній відступ і не бути надто компактною.

Також важливо додавати атрибути aria-expanded і aria-controls (у випадку використання JavaScript) або використовувати семантичні елементи, які мають вбудовану підтримку доступності. Користувачі, що навігують із клавіатури, повинні мати можливість відкрити меню за допомогою клавіші Enter або Space, а стилі :focus-visible допоможуть зробити фокус помітним.

За даними досліджень мобільної поведінки користувачів (2024–2025), понад 60% трафіку більшості сайтів припадає саме на смартфони. Користувачі очікують, що меню відкриватиметься миттєво, без затримок і стрибків макета. Тому рекомендується уникати різких змін висоти сторінки та використовувати плавні трансформації через transform і opacity замість анімації властивості height, що може викликати перерахунок макета.

Інвестуючи увагу в продуктивність, доступність і зручність мобільного інтерфейсу, ви не лише покращуєте взаємодію з користувачем, але й підвищуєте загальну якість та конкурентоспроможність вашого вебсайту відповідно до сучасних стандартів веброзробки.

Оновлено 10.03.2026

ChatGPT Perplexity Google (AI)