Магия бургер-меню без JavaScript: Полное руководство по CSS

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

Что такое бургер-меню и зачем оно нужно?

Бургер-меню (или гамбургер-меню) — это иконка, которая скрывает навигацию сайта, раскрывая её при клике. Оно решает проблему ограниченного пространства на экранах смартфонов и планшетов, позволяя сохранить чистый и минималистичный интерфейс. Использование CSS вместо JS делает меню быстрее, доступнее для пользователей с отключённым JavaScript и проще в реализации.

Создаём основу: HTML-разметка

Вся магия начинается с правильной семантической разметки. Нам понадобится контейнер для кнопки и само меню.

Базовый HTML-код

<nav class=\"navbar\">
    <!-- Кнопка-бургер -->
    <input type=\"checkbox\" id=\"burger-toggle\" class=\"burger-checkbox\">
    <label for=\"burger-toggle\" class=\"burger-button\">
        <span class=\"burger-line\"></span>
    </label>

    <!-- Само меню -->
    <ul class=\"menu\">
        <li><a href=\"#\">Главная</a></li>
        <li><a href=\"#\">О нас</a></li>
        <li><a href=\"#\">Услуги</a></li>
        <li><a href=\"#\">Контакты</a></li>
    </ul>
</nav>

Секрет в использовании элемента <input type=\"checkbox\">. Его состояние (отмечен или нет) мы будем использовать в CSS для управления видимостью меню. Элемент <label>, связанный с этим чекбоксом через атрибут for, и будет нашей кликабельной кнопкой.

Оживляем CSS: стили и анимация

Теперь перейдём к самому интересному — каскадным таблицам стилей. Мы создадим иконку, спрячем чекбокс и настроим плавное появление меню.

Стили для кнопки-бургера

.burger-checkbox {
    display: none; /* Прячем сам чекбокс */
}

.burger-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

.burger-line {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333;
    position: relative;
    transition: all 0.3s ease;
}

.burger-line::before,
.burger-line::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: inherit;
    left: 0;
    transition: inherit;
}

.burger-line::before {
    top: -10px;
}

.burger-line::after {
    bottom: -10px;
}

Анимация превращения в крестик

Когда чекбокс отмечен (т.е. меню открыто), мы хотим, чтобы иконка превратилась в крестик. Используем селектор по состоянию чекбокса.

.burger-checkbox:checked ~ .burger-button .burger-line {
    background-color: transparent;
}

.burger-checkbox:checked ~ .burger-button .burger-line::before {
    top: 0;
    transform: rotate(45deg);
}

.burger-checkbox:checked ~ .burger-button .burger-line::after {
    bottom: 0;
    transform: rotate(-45deg);
}

Стили и анимация для выпадающего меню

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    list-style: none;
    padding: 80px 20px 20px;
    margin: 0;
    transform: translateX(-100%); /* Прячем меню за левым краем */
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    z-index: 99;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

/* Когда чекбокс отмечен, сдвигаем меню на экран */
.burger-checkbox:checked ~ .menu {
    transform: translateX(0);
}

.menu li {
    margin-bottom: 20px;
}

.menu a {
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
    padding: 10px;
    display: block;
    transition: color 0.3s;
}

.menu a:hover {
    color: #007bff;
}

Ключевой момент — использование свойства transform: translateX() для сокрытия и показа меню. Анимация этого свойства работает очень плавно, так как браузер может задействовать аппаратное ускорение.

Продвинутые техники и советы

1. Адаптивность

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

@media (min-width: 768px) {
    .burger-button { display: none; }
    .menu {
        position: static;
        height: auto;
        transform: none;
        display: flex;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }
}

2. Улучшение доступности (a11y)

• Добавьте текстовую метку для скринридеров: <span class=\"sr-only\">Открыть меню</span> внутри <label>.
• Используйте семантический тег <nav>.
• Управляйте фокусом с помощью :focus-visible.

3. Альтернатива чекбоксу: псевдокласс :target

Можно использовать идентификатор и псевдокласс :target для управления состоянием без чекбокса, но этот метод имеет ограничения (например, меняет URL).

Часто задаваемые вопросы (FAQ)

Можно ли сделать такое меню без чекбокса?

Да, можно использовать псевдокласс :focus-within на контейнере или хак с <details> и <summary>, но метод с чекбоксом остаётся самым надёжным и кроссбраузерным.

Почему меню не закрывается при клике на ссылку?

Состояние чекбокса не сбрасывается автоматически. Чтобы решить это, можно добавить небольшой скрипт на JavaScript, который снимет флажок при клике на ссылку, либо использовать <label> для закрытия, размещённое поверх меню.

Будет ли это работать в старых браузерах?

Основная функциональность (показать/скрыть) будет работать везде, где поддерживаются чекбоксы и селекторы соседних элементов (~). Сложные анимации transform могут не работать в очень старых браузерах, но это graceful degradation — меню останется функциональным.

Как добавить затемнение фона при открытом меню?

Создайте элемент <div class=\"overlay\"> после чекбокса и стилизуйте его с помощью .burger-checkbox:checked ~ .overlay { display: block; }, задав полупрозрачный чёрный фон и позиционирование поверх всего контента.

Создание бургер-меню на чистом CSS — это элегантное решение, которое демонстрирует мощь современных веб-стандартов. Оно легковесное, производительное и отлично контролируется стилями. Экспериментируйте с анимациями, формами и переходами, чтобы создать уникальное меню для вашего проекта!