Как с помощью CSS создать «бургер-меню» для мобильной версии сайта без использования JavaScript?
Создать бургер-меню без JavaScript вполне реально — для этого используется классическая CSS-техника на основе скрытого элемента « и псевдокласса `:checked`. Рассмотрим подробно, как это работает.
## Принцип работы
Когда пользователь кликает на иконку «бургера», на самом деле он кликает на `
## HTML-структура
html
## CSS-стили
css
/* Скрываем чекбокс */
.burger-checkbox {
display: none;
}
/* Иконка бургера */
.burger-icon {
display: none;
flex-direction: column;
cursor: pointer;
gap: 5px;
}
.burger-icon span {
display: block;
width: 25px;
height: 3px;
background-color: #333;
transition: all 0.3s ease;
}
/* Меню по умолчанию */
.nav-menu {
list-style: none;
display: flex;
gap: 20px;
}
/* Мобильная версия */
@media (max-width: 768px) {
.burger-icon {
display: flex;
}
.nav-menu {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background: #fff;
padding: 20px;
}
/* Показываем меню при активном чекбоксе */
.burger-checkbox:checked ~ .nav-menu {
display: flex;
}
/* Анимация иконки при открытии */
.burger-checkbox:checked ~ .burger-icon span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.burger-checkbox:checked ~ .burger-icon span:nth-child(2) {
opacity: 0;
}
.burger-checkbox:checked ~ .burger-icon span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
## Ключевые моменты
1. **Селектор `~` (general sibling)** — позволяет выбрать элементы, следующие за чекбоксом на одном уровне DOM.
2. **Псевдокласс `:checked`** — срабатывает, когда чекбокс отмечен, что имитирует логику переключения без JS.
3. **Анимация иконки** — три полоски трансформируются в крестик через `transform` и `opacity`.
4. **`transition`** — добавляет плавность переходу, улучшая UX.
## Ограничения метода
— Меню не закрывается при клике вне его области без JS.
— Сложнее управлять доступностью (ARIA-атрибуты требуют JS для динамического обновления).
— Не работает с клавиатурной навигацией так же хорошо, как JS-решение.
Тем не менее, для простых сайтов и лендингов этот подход полностью рабочий и не требует подключения скриптов.