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

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

Почему именно чистый CSS?

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

Пошаговая сборка

1. Разметка HTML: Минимализм и доступность

Начнём с семантически правильной структуры:

<nav class=\"navbar\">
  <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=\"/about\">О нас</a></li>
    <li><a href=\"/contact\">Контакты</a></li>
  </ul>
</nav>

Обратите внимание: <label> связан с чекбоксом через for=\"burger-toggle\". Клик по label будет переключать состояние checkbox. Атрибут aria-label важен для скринридеров.

2. Стилизация кнопки-бургера

Спрячем родной чекбокс, но оставим его доступным для клавиатуры:

.burger-checkbox {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

Теперь создадим визуальную кнопку из трёх полосок с помощью элемента <span> и его псевдоэлементов:

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

.burger-line,
.burger-line::before,
.burger-line::after {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.burger-line::before,
.burger-line::after {
  content: '';
  position: absolute;
}

.burger-line::before { transform: translateY(-10px); }
.burger-line::after { transform: translateY(10px); }

3. Магия анимации при открытии

Вот где проявляется сила :checked. Когда чекбокс отмечен, мы превращаем три полоски в крестик:

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

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

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

4. Показ/скрытие меню

Используем тот же :checked для управления видимостью меню. Для мобильных устройств часто используют трансформации вместо display: none для плавной анимации:

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: white;
  padding: 80px 20px 20px;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 99;
}

.burger-checkbox:checked ~ .menu {
  transform: translateX(0);
}

5. Медиазапросы для десктопа

На больших экранах скрываем бургер-кнопку и показываем меню в горизонтальном виде:

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

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

• Затемнение фона: Добавьте ::before с полупрозрачным фоном, который появляется при открытом меню.
• Анимация пунктов: Используйте задержку (transition-delay) для последовательного появления ссылок.
• Закрытие по клику вне меню: На чистом CSS это сложно, но возможно через дополнительный <label>, покрывающий всю область.
• Поддержка клавиатуры: Убедитесь, что меню закрывается по клавише ESC (требует небольшого JS, но значительно улучшает доступность).

Частые ошибки

1. Использование display: none для скрытия чекбокса — ломает доступность с клавиатуры.
2. Отсутствие aria-label или aria-expanded для скринридеров.
3. Забывают про z-index — меню может оказаться под другим контентом.
4. Жёсткие единицы измерения (px) вместо относительных (rem, %) для адаптивности.

FAQ: Ответы на частые вопросы

Можно ли сделать бургер-меню без JavaScript?

Да, абсолютно! Как мы показали выше, чекбокс и псевдокласс :checked полностью заменяют логику переключения состояния.

Почему используют именно чекбокс, а не радиокнопку?

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

Как сделать анимацию плавнее?

Экспериментируйте со свойством transition-timing-function. Кривая Безье cubic-bezier(0.68, -0.55, 0.265, 1.55) даёт эффект «пружинки».

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

Псевдокласс :checked поддерживается всеми браузерами, включая IE9+. Для анимаций трансформаций в IE может потребоваться префикс -ms-.

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

На чистом CSS — никак. Это единственное существенное ограничение. Для этой функции потребуется несколько строк JavaScript, либо можно сделать каждую ссылку также <label> для того же чекбокса.