Магия CSS: Создаём бургер-меню без единой строчки JavaScript

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

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

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

Строим фундамент: HTML-разметка

Всё начинается с семантически правильной HTML-структуры. Нам понадобится контейнер для кнопки и сам скрытый блок меню.

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

Вот простая и эффективная разметка:

<nav class="navbar" role="navigation">
  <!-- Кнопка-бургер -->
  <input type="checkbox" id="burger-toggle" class="burger-checkbox">
  <label for="burger-toggle" class="burger-button" aria-label="Открыть меню">
    <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

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

1. Стилизуем кнопку-бургер

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

.burger-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 100;
}

.burger-line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s ease;
}

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

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

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

2. Создаём анимацию превращения в крестик

Используя состояние :checked у чекбокса, мы можем трансформировать три полоски в крестик.

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

3. Прячем и показываем меню

.menu {
  position: fixed; /* или absolute, в зависимости от макета */
  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;
}

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

Продвинутые техники и улучшения

Чтобы ваше меню было по-настоящему профессиональным, рассмотрим несколько улучшений.

• Плавное появление пунктов меню: Добавьте задержку (transition-delay) для <li> элементов внутри .menu, чтобы они появлялись последовательно после открытия.
• Затемнение фона (оверлей): Создайте псевдоэлемент с полупрозрачным чёрным фоном, который будет появляться под меню, но поверх основного контента, когда меню открыто.
• Закрытие по клику на ссылку или оверлей: Чтобы меню закрывалось при выборе пункта, можно сделать все ссылки в меню также <label> для того же чекбокса, что сбросит его состояние.

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

Почему именно чекбокс, а не, например, кнопка?

Чекбокс имеет встроенное состояние (:checked), которое можно использовать в CSS без JavaScript. Это самый простой и надёжный «переключатель» на чистом CSS.

Будет ли такое меню доступным с клавиатуры?

Да. Элемент <label> по умолчанию фокусируем с клавиатуры (по Tab). Нажатие Enter активирует связанный чекбокс, открывая или закрывая меню. Важно правильно управлять фокусом внутри открытого меню.

Можно ли сделать меню справа или сверху?

Конечно! Достаточно изменить свойство transform в начальном состоянии (например, translateX(100%) для правой стороны) и направление анимации.

Это решение работает во всех браузерах?

Практически во всех современных браузерах, включая последние версии Chrome, Firefox, Safari и Edge. Основные используемые свойства (transform, transition, псевдоклассы) имеют отличную поддержку.

Чем такое решение лучше JavaScript?

1. Производительность: Анимации на CSS обычно работают плавнее, так как оптимизированы браузером.
2. Надёжность: Меньше зависимостей — меньше точек отказа.
3. Простота: Код легче понять и поддерживать.

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