Как создать гамбургер меню, используя CSS и HTML?
3498
Время чтения: 16 минут
В 2025 году 68% трафика приходит с мобильных устройств (по данным Яндекс.Метрики), и меню на маленьких экранах должно сворачиваться в компактную кнопку — классический «гамбургер» с тремя полосками. Это не просто тренд, а необходимость: Google и Яндекс ранжируют адаптивные сайты выше. Без бургер-меню пользователи на смартфонах не найдут навигацию, а отказы вырастут на 40%. В этой статье разберём, как создать плавно анимированную кнопку на чистом CSS без JavaScript. Полный код, примеры, адаптивность и вариации под ваш дизайн.
Зачем нужна кнопка-гамбургер и как она работает
На десктопе меню горизонтальное, на мобильном — вертикальное. Гамбургер-меню — это иконка из трёх горизонтальных линий, которая при клике превращается в крестик и раскрывает боковое меню. Анимация делает интерфейс живым и интуитивным, повышая удобство на 25% (по данным Nielsen Norman Group). CSS-эффекты: полоски вращаются, создавая крест, с плавным transition. В отличие от JavaScript, CSS-анимация не нагружает процессор и работает быстрее: при использовании transition вместо JS-циклов производительность рендеринга возрастает на 30-40% за счёт GPU-ускорения. Для более сложных сценариев (например, аккордеон или слайдер) применяют CSS @keyframes — это задаёт ключевые кадры и позволяет управлять длительностью без привязки к событию click.
Полный код: HTML, CSS, JavaScript
Кнопка состоит из контейнера .burger с .burgerBox внутри и .burgerInner — полосками. Анимация через ::before и ::after. Для реактивных эффектов (hover и focus) используем CSS-псевдоклассы — это меняет стили без JS, а плавное изменение обеспечивается свойством transition.
HTML
<div class="burger burgerSlider">
<div class="burgerBox">
<div class="burgerInner"></div>
</div>
</div>CSS
.burger {
padding: 15px;
display: inline-block;
cursor: pointer;
transition: opacity 0.15s linear;
background: transparent;
border: 0;
margin: 0;
overflow: visible;
font: inherit;
color: inherit;
}
.burger:hover {
opacity: 0.7;
}
.burgerBox {
width: 40px;
height: 24px;
position: relative;
}
.burgerInner {
display: block;
top: 50%;
margin-top: -2px;
}
.burgerInner,
.burgerInner::before,
.burgerInner::after {
width: 40px;
height: 4px;
background: #000;
border-radius: 4px;
position: absolute;
transition: transform 0.15s ease;
}
.burgerInner::before,
.burgerInner::after {
content: "";
display: block;
}
.burgerInner::before {
top: -10px;
}
.burgerInner::after {
bottom: -10px;
}
/* Слайдер-анимация */
.burgerSlider .burgerInner {
top: 2px;
}
.burgerSlider .burgerInner::before {
top: 10px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.burgerSlider .burgerInner::after {
top: 20px;
}
.burgerSlider.active .burgerInner {
transform: translate3d(0, 10px, 0) rotate(45deg);
}
.burgerSlider.active .burgerInner::before {
transform: rotate(-45deg) translate3d(-5.714px, -6px, 0);
opacity: 0;
}
.burgerSlider.active .burgerInner::after {
transform: translate3d(0, -20px, 0) rotate(-90deg);
}JavaScript
document.querySelectorAll('.burger').forEach(burger => {
burger.addEventListener('click', function () {
burger.classList.toggle('active');
});
});Вы будете получать статьи по нашим направлениям, советы и кейсы предпринимателей
Как подключить меню и кнопку
Добавьте CSS и JS в <head> или <body>. HTML — в хедер или навбар. Для раскрытия меню используйте .active на родительском контейнере. В отличие от аккордеона или слайдера, где требуется JS для каждого шага, здесь анимация полностью на CSS — это снижает нагрузку на браузер и упрощает поддержку.
<nav class="navbar">
<div class="burger burgerSlider" onclick="toggleMenu()">...</div>
<ul class="menu" id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
</ul>
</nav>
<script>
function toggleMenu() {
document.getElementById('menu').classList.toggle('active');
}
</script>
<style>
.menu {
display: none;
}
.menu.active {
display: block;
}
@media (min-width: 768px) {
.burger { display: none; }
.menu { display: flex; }
}
</style>Вариации: цвета и эффекты
Базовый CSS легко кастомизировать. Меняйте цвета, размеры, добавляйте тени. Для реактивных эффектов (hover/focus/click) используйте псевдоклассы — это делает кнопку отзывчивой без дополнительного JS. Если нужна более сложная анимация (например, вращение в стиле слайдера), применяйте @keyframes — это задаёт ключевые кадры и управляет длительностью.
Белая кнопка на тёмном фоне
.burger-white {
color: #fff;
}
.burger-white .burgerInner,
.burger-white .burgerInner::before,
.burger-white .burgerInner::after {
background: #fff;
}
.burger-white.active .burgerInner,
.burger-white.active .burgerInner::before,
.burger-white.active .burgerInner::after {
background: #000;
}Эффект «крест» с вращением
.burger-cross.active .burgerInner {
transform: rotate(45deg);
}
.burger-cross.active .burgerInner::before {
transform: rotate(-90deg) translate(-10px, 0);
opacity: 1;
}Чек-лист: 6 пунктов для проверки работоспособности гамбургер-меню
Чтобы убедиться, что меню работает корректно на всех устройствах, пройдите по этому чек-листу после вёрстки:
- Клик по кнопке — при нажатии на гамбургер три полоски превращаются в крестик (класс
.activeдобавляется). Проверьте на реальном смартфоне или в эмуляторе. Для отладки используйте@keyframes— это помогает синхронизировать анимацию с событиями. - Плавность анимации — все трансформации должны длиться 0.15 секунды (значение
transition). Если меню дёргается, увеличьте время до 0.3s. CSS-анимация черезtransitionне нагружает процессор, в отличие от JS-циклов, поэтому при 60 кадрах в секунду она остаётся плавной. - Адаптивность — на экранах шире 768px гамбургер скрыт (
display: none), а меню отображается горизонтально. На мобильных — наоборот. - Доступность — добавьте атрибут
aria-label="Открыть меню"на кнопку иrole="button"для скринридеров. - Отсутствие багов с z-index — убедитесь, что меню не перекрывается другими элементами (шапка, слайдер). Установите
z-index: 1000для контейнера.burger. В сложных макетах (аккордеон, карусель) z-index конфликтует чаще — проверяйте иерархию. - Тест на touch-устройствах — на iOS и Android кнопка не должна срабатывать дважды из-за эмуляции hover. Используйте
@media (hover: none)для отключения эффекта:hoverна мобильных.
Типичные ошибки при создании гамбургер-меню (и как их исправить)
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Полоски не центрируются | Верхняя и нижняя полоски смещены относительно средней, меню выглядит криво. | Проверьте значения top у ::before и ::after. Для .burgerInner высота 4px, шаг между полосками — 10px. Формула: top: -10px для верхней, bottom: -10px для нижней (или top: 10px и top: 20px в слайдере). |
| Анимация ломается на мобильных | При клике крестик формируется рывками, полоски «прыгают». | Добавьте will-change: transform к .burgerInner и его псевдоэлементам. Это задействует GPU-ускорение. Если используете @keyframes, убедитесь, что ключевые кадры заданы без резких скачков — иначе браузер пересчитывает позиции медленнее. |
| Меню не раскрывается после клика | Кнопка анимируется, но список ссылок остаётся скрытым. | Убедитесь, что в JavaScript используется classList.toggle('active') для обоих элементов: и для кнопки, и для <ul class="menu">. Пример: document.getElementById('menu').classList.toggle('active'); |
| Гамбургер виден на десктопе | На широких экранах кнопка отображается вместе с горизонтальным меню. | В медиазапросе @media (min-width: 768px) задайте .burger { display: none; } и .menu { display: flex; }. Убедитесь, что специфичность селекторов достаточна. Для реактивных эффектов (hover/focus) на десктопе можно добавить pointer-events: none для скрытой кнопки. |
Часто задаваемые вопросы
Нужен ли JavaScript для создания анимированного гамбургер-меню?
Нет, для базовой анимации открытия и превращения в крестик достаточно чистого CSS с псевдоэлементами ::before и ::after и свойством transition. JavaScript потребуется только для обработки клика, чтобы переключать класс активности (например, .is-active), который запускает анимацию.
Почему в коде используются псевдоэлементы ::before и ::after вместо отдельных тегов span?
Псевдоэлементы позволяют создать три полоски (верхнюю, среднюю и нижнюю) внутри одного элемента .burgerInner, что делает HTML-структуру чище и уменьшает количество DOM-узлов. Это улучшает производительность и упрощает анимацию вращения для формирования крестика.
Как адаптировать гамбургер-меню под разные размеры экранов?
Добавьте CSS-медиазапросы, чтобы скрывать стандартное горизонтальное меню на мобильных устройствах (например, @media (max-width: 768px)) и показывать только кнопку-гамбургер. Саму иконку можно масштабировать через width и height контейнера .burgerBox, сохраняя пропорции.
Почему transition работает медленно или дёргано при анимации?
Частая причина — анимация свойств, которые вызывают перерасчёт геометрии (например, height или margin). Используйте только transform и opacity для плавности, так как они обрабатываются GPU. Также убедитесь, что свойство transition задано для правильных селекторов.
Можно ли сделать гамбургер-меню доступным для людей с ограниченными возможностями?
Да, добавьте атрибуты role='button' и aria-label='Открыть меню' на контейнер .burger, а также используйте свойство outline для видимого фокуса при навигации с клавиатуры. При открытии меню меняйте aria-expanded на true для корректной работы скринридеров.
- Факторы ранжирования Яндекса 450–503: свежесть, URL, коммерция и поведение (2025)
- Факторы ранжирования Яндекса с 391 по 449: BM25, сегменты, свежесть
- Факторы ранжирования Яндекса 322-389: Актуальные метрики
- Как оформить блок акции через CSS в 2025: Зачеркнутая цена + эффектная скидка за 5 минут
- Анимированные кнопки на CSS 2025: 3 эффекта за 5 минут (с кодом и примерами)
