Создайте анимированный Hamburger, используя HTML5 и CSS3

В этом кратком руководстве мы создадим стильный и аккуратный анимированный иконку‑гамбургер с помощью HTML5 и CSS3. Такой элемент отлично подходит для мобильных меню, адаптивной навигации и современных интерфейсов.

Что мы создадим

Вы научитесь превращать стандартную иконку меню из трёх полосок в динамичную анимацию, которая плавно трансформируется в кнопку закрытия. В процессе мы разберём принципы оптимального использования CSS transitions и transformations.

Зачем использовать анимированный «гамбургер»

• Улучшает пользовательский опыт за счёт плавной интерактивности.
• Подходит для адаптивных сайтов и мобильных приложений.
• Позволяет визуально обозначить состояние меню: открыто/закрыто.
• Реализуется средствами чистого CSS без JavaScript.

Основные элементы реализации

1. HTML‑структура

Мы создадим простой блок из трёх линий, который будет служить основой для анимации.

2. CSS‑стили

С помощью свойств transform: rotate(), translate() и opacity мы заставим полоски менять форму при взаимодействии.

3. Анимация через transitions

Используя transition-duration и transition-timing-function, добьёмся плавности и отзывчивости анимации.

Пример кода

HTML

<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.hamburger {
  width: 35px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 4px;
  margin: 6px 0;
  background: #000;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

Полезные ресурсы

Линки:

1. https://codepen.io/tag/hamburger%20menu/
2. https://codepen.io/designcouch/pen/Atyop

Заключение

Анимированный «гамбургер» — это простой, но эффектный способ улучшить навигацию на сайте. Освоив базовые трансформации и переходы CSS3, вы сможете создавать собственные варианты анимаций, адаптированных под стиль вашего проекта.