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

Чтобы создать бургер-меню в CSS с использованием JavaScript, необходимо создать список-меню и кнопку «Бургер», по нажатию на которую открывается или скрывается список.

HTML:

<header>
  <div class="menu-icon"></div>
  <nav class="menu">
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О компании</a></li>
      <li><a href="#">Наши услуги</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>

CSS:

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

.menu-icon::before,
.menu-icon::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background-color: black;
}

.menu-icon::before {
  top: -6px;
}

.menu-icon::after {
  top: 6px;
}

.menu-icon.active::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-icon.active::after {
  top: 0;
  transform: rotate(-45deg);
}

.menu-icon.active {
  background-color: transparent;
}

.menu {
  position: absolute;
  top: 60px;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: white;
  transition: left 0.4s ease-in-out;
}

.menu.active {
  left: 0;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.menu ul li {
  margin: 20px 0;
}

.menu ul li a {
  display: block;
  text-decoration: none;
  font-size: 24px;
  color: black;
}

JavaScript:

const menuIcon = document.querySelector('.menu-icon');
const menu = document.querySelector('.menu');

menuIcon.addEventListener('click', () => {
  menuIcon.classList.toggle('active');
  menu.classList.toggle('active');
});

В данном примере мы создали элемент меню в виде списка ul с пунктами li. Создали кнопку «Бургер» в виде трех горизонтальных черточек с помощью псевдоэлементов ::before и ::after. При помощи JavaScript к кнопке прикрепили обработчик события, который изменяет классы элементов при нажатии на кнопку «Бургер» и открывает или скрывает список-меню.

Применение стилей CSS показывает иконку из 3 полосок, при наведении курсора на иконку выделение иконки меняет цвет, также по нажатию на иконку она превращается в крестик и список-меню открывается.