Как сделать - значок меню
Узнайте, как создать значок меню с помощью 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
свойство and определяет ширину и высоту каждого бара.
Мы добавили черный 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> и мы указываем имя класса для каждого.
Элемент container используется для отображения символа указателя, когда пользователь перемещает указатель мыши на Div (Bars). При нажатии на него будет выполнена функция JavaScript, которая добавит в него новое имя класса, которое изменит стили каждой горизонтальной полосы: первый и последний бар преобразуется и поворачивается на букву "x". Бар в середине исчезает и становится невидимым.