Как с помощью CSS создать адаптивное меню («бургер»), которое плавно выезжает сбоку при клике?

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

## HTML-структура

Сначала создадим базовую разметку:

html

## CSS-стили

Ключевой приём — использование `transform: translateX()` для скрытия панели за пределами экрана и `transition` для плавной анимации:

css
/* Кнопка-бургер */
.burger {
position: fixed;
top: 16px;
left: 16px;
z-index: 1000;
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
}

.burger span {
display: block;
width: 28px;
height: 3px;
background: #333;
border-radius: 3px;
transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Анимация иконки в крестик */
.burger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

/* Боковая панель */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100%;
background: #fff;
box-shadow: 2px 0 12px rgba(0,0,0,0.15);
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
padding: 60px 24px 24px;
}

.sidebar.active {
transform: translateX(0);
}

/* Затемнение фона */
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
z-index: 998;
}

.overlay.active {
opacity: 1;
pointer-events: all;
}

## JavaScript для переключения

javascript
const btn = document.getElementById(‘burgerBtn’);
const sidebar = document.getElementById(‘sidebar’);
const overlay = document.getElementById(‘overlay’);

function toggleMenu() {
btn.classList.toggle(‘active’);
sidebar.classList.toggle(‘active’);
overlay.classList.toggle(‘active’);
}

btn.addEventListener(‘click’, toggleMenu);
overlay.addEventListener(‘click’, toggleMenu);

## Советы по улучшению

— **Доступность:** добавьте `aria-expanded` на кнопку и управляйте им через JS.
— **Производительность:** используйте `will-change: transform` на `.sidebar` для аппаратного ускорения.
— **Адаптивность:** скрывайте бургер на десктопе через `@media (min-width: 768px) { .burger { display: none; } }`.
— **Закрытие по Escape:** добавьте обработчик `keydown` для клавиши Escape.
— **Прокрутка:** при открытом меню блокируйте прокрутку страницы через `document.body.style.overflow = ‘hidden’`.

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