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

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

HTML:

<div class="hamburger-menu">
  <div class="hamburger-menu-line"></div>
</div>

CSS:

.hamburger-menu {
  position: relative;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.hamburger-menu-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  top: 50%;
  margin-top: -1px;
  left: 0;
  transition: background-color 0.2s ease-in-out;
}

.hamburger-menu-line::before,
.hamburger-menu-line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  left: 0;
  transition: transform 0.2s ease-in-out;
}

.hamburger-menu-line::before {
  top: -6px;
}

.hamburger-menu-line::after {
  bottom: -6px;
}

.hamburger-menu.open .hamburger-menu-line {
  background-color: transparent;
}

.hamburger-menu.open .hamburger-menu-line::before {
  transform: rotate(45deg);
  top: 0;
}

.hamburger-menu.open .hamburger-menu-line::after {
  transform: rotate(-45deg);
  bottom: 0;
}

CSS стили создают одну линию снизу, а затем с помощью псевдоэлементов ::before и ::after создают дополнительные линии, которые выстраиваются на определенном расстоянии от первой линии. При щелчке на гамбургер-меню меню открывается.

Для этого CSS-стила необходимо добавить JavaScript, чтобы при щелчке на гамбургер-меню CSS класс «open» добавлялся к элементу .hamburger-menu, чтобы активировать анимацию открытия/закрытия меню.

JavaScript:

let hamburgerMenu = document.querySelector('.hamburger-menu');

hamburgerMenu.addEventListener('click', () => {
    hamburgerMenu.classList.toggle('open');
});

JavaScript добавляет обработчик событий на клик по гамбургер-меню, который переключает класс «open» на элементе .hamburger-menu, чтобы активировать анимацию.

Этот пример можно настроить и доработать в соответствии с конкретными требованиями и оформлением дизайна.