Как создать гамбургер меню, используя CSS и HTML?

Owebs

21 марта

2987

Время чтения: 7 минут

Оглавление

Развернуть Свернуть

Зачем нужна кнопка-гамбургер и как она работает
Полный код: HTML, CSS, JavaScript
Как подключить меню и кнопку
Вариации: цвета и эффекты
1. Белая кнопка на тёмном фоне
2. Эффект «крест» с вращением

В 2025 году 68% трафика приходит с мобильных устройств (по данным Яндекс.Метрики), и меню на маленьких экранах должно сворачиваться в компактную кнопку — классический «гамбургер» с тремя полосками. Это не просто тренд, а необходимость: Google и Яндекс ранжируют адаптивные сайты выше. Без бургер-меню пользователи на смартфонах не найдут навигацию, а отказы вырастут на 40%. В этой статье разберём, как создать плавно анимированную кнопку на чистом CSS без JavaScript. Полный код, примеры, адаптивность и вариации под ваш дизайн.

Зачем нужна кнопка-гамбургер и как она работает

На десктопе меню горизонтальное, на мобильном — вертикальное. Гамбургер-меню — это иконка из трёх горизонтальных линий, которая при клике превращается в крестик и раскрывает боковое меню. Анимация делает интерфейс живым и интуитивным, повышая удобство на 25% (по данным Nielsen Norman Group). CSS-эффекты: полоски вращаются, создавая крест, с плавным transition.

Полный код: HTML, CSS, JavaScript

Кнопка состоит из контейнера .burger с .burgerBox внутри и .burgerInner — полосками. Анимация через ::before и ::after.

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 на родительском контейнере.

<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 легко кастомизировать. Меняйте цвета, размеры, добавляйте тени.

Белая кнопка на тёмном фоне

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