Как сделать гамбургер в css

Для того чтобы создать иконку гамбургер, которая используется как кнопка открытия меню на мобильных устройствах, можно использовать псевдоэлементы before и after в сочетании с простыми геометрическими фигурами.

Пример:

HTML:

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

CSS:

.hamburger {
  display: inline-block;
  width: 24px;
  height: 18px;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #333;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: ease-in-out 0.2s;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2), .hamburger span:nth-child(3) {
  top: 8px;
}

.hamburger span:nth-child(4) {
  top: 16px;
}

.hamburger.active span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

В данном примере мы создаем контейнер с классом hamburger, в котором размещаем три блока span. Каждый блок span представляет собой линию, которая будет являться частью иконки гамбургер.

Далее мы стилизуем каждый блок span. Свойство opacity устанавливает прозрачность элемента, transform: rotate позволяет повернуть блок на определенный угол, а transition задает эффект плавного перехода при изменении различных свойств элемента.

Чтобы сделать иконку гамбургер активной, мы добавляем класс active к контейнеру hamburger, и при помощи селектора .hamburger.active настраиваем стили всех блоков span в зависимости от их порядкового номера (nth-child).

Вот как выглядит иконка гамбургер с классом active:

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

Это пример базовой иконки гамбургер, которую можно дорабатывать по своему усмотрению. Кроме того, ее можно адаптировать для своего проекта.