Иконка меню

Здесь вы узнаете, как сделать анимированную иконку меню при помощи CSS.

Как сделать иконку меню

Если вы не хотите использовать внешнюю библиотеку иконок, то вы можете сделать базовую иконку меню при помощи CSS:

Шаг 1) Добавляем HTML:

<div></div>
<div></div>
<div></div>

Шаг 2) Добавляем CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Объяснение примера

Свойства width и height определяют ширину и высоту полоски.

Также, мы определили черный фон при помощи свойства background-color и задали верхний и нижний отступ при помощи свойства margin, чтобы создать небольшой промежуток между полосками.

Анимированная иконка

При помощи CSS и JavaScript можно сделать так, чтобы при нажатии на иконку, она принимала форму "X":

Шаг 1) Добавляем HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Шаг 2) Добавляем CSS:

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Поворачиваем первую полоску */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

/* Делаем вторую полоску прозрачной */
.change .bar2 {
  opacity: 0;
}

/* Поворачиваем последнюю полоску */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Шаг 3) Добавляем JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

Объяснение примера

HTML & CSS: Используем те же стили, что и раньше, но в этот раз все элементы <div> оборачиваем контейнерным элементом и для каждого элемента определяем класс.

Контейнерный элемент используется для определения формы курсора при наведении мыши на полоски иконки. Когда пользователь кликает на иконку, выполняется функция JavaScript, которая добавляет ему новый класс. Этот класс изменяет стили каждой полоски: первая и последняя полоски поворачиваются и формируют букву "x". Полоска посередине становится невидимой.