как сделать бургер js

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

Пример кода:

<!-- HTML -->
<div class="burger">
  <div class="burger__line"></div>
  <div class="burger__line"></div>
  <div class="burger__line"></div>
</div>

/* CSS */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.burger__line {
  width: 100%;
  height: 3px;
  background-color: black;
}

// JavaScript
const burger = document.querySelector('.burger');
const lines = document.querySelectorAll('.burger__line');

function toggleBurger() {
  lines.forEach((line) => line.classList.toggle('active'));
}

burger.addEventListener('click', toggleBurger);

В данном примере мы создали элемент бургера с тремя линиями, которые будут выглядеть как бургер. Затем мы написали функцию toggleBurger, которая будет переключать класс active для каждой линии бургера при клике на него. Для этого мы использовали метод forEach для перебора всех линий и метод classList.toggle.

Наконец, мы добавили обработчик события click на элемент бургера, который вызывает функцию toggleBurger при клике на него.

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