Как сделать - Значок меню
Узнать, как создать значок меню с помощью CSS.
Создать значок меню
Если вы не используете библиотеку иконок, вы можете создать значок основного меню с помощью CSS:
Шаг 1) Добавить HTML:
Пример
<div></div>
<div></div>
<div></div>Шаг 2) Добавить CSS:
Объяснение примера
Свойство width и height определяет ширину и высоту каждой полосы.
Мы добавили черный цвет background-color, и сверху и снизу margin используется для создания некоторого расстояния между каждым баром.
Анимированный значок
Используйте CSS и JavaScript, чтобы изменить значок меню на значок "отмена/удаление" при нажатии на него:
Шаг 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 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Затухает второй бар */
.change .bar2 {
opacity: 0;
}
/* Поворот последнего бара */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}Шаг 3) Добавить JavaScript:
Объяснение примера
HTML и CSS: мы используем те же стили, что и раньше, только на этот раз мы обертываем элемент контейнера вокруг каждого элемента <div> и указываем имя класса для каждого.
Элемент - контейнер используется для отображения символа курсора, когда пользователь перемещает указатель мыши на паркете Дворца игровых видов спорта (деятельность баров). При нажатии на нее будет выполнена функция JavaScript, которая добавит к ней новое имя класса, которое изменит стили каждой горизонтальной полосы: первая и последняя полоса преобразуются и поворачиваются на букву "x". Полоса посередине исчезает и становится невидимой.
