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