Базовый анимированный значок меню с помощью CSS и JavaScript

ШАГ 1

Добавляем HTML:

Элемент container используется для отображения символа указателя, когда мы перемещаем указатель мыши на Div. При нажатии на него будет выполнена функция JavaScript, которая добавит в него новое имя класса, которое изменит стили каждой горизонтальной полосы.

ШАГ 2

Добавляем CSS, где у нас поворачивается первая полоса, исчезает вторая и поворачивается последняя:

ШАГ 3

Добавляем JavaScript:

На этом всё! Подписывайся на канал WebLab, мир веб-разработки.