Как создать: иконка меню
- Предыдущая страница Панель иконок
- Следующая страница Аккордеон
Узнайте, как создать иконку меню с помощью CSS.
Если вы не используете библиотеку иконок, вы можете создать базовую иконку меню с помощью CSS:
Как создать иконку меню
Первый шаг - добавление HTML:
<div></div> <div></div> <div></div>
Второй шаг - добавление CSS:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Пример объяснения:
width и height Атрибуты определяют ширину и высоту каждой полосы.
Мы добавили черный цвет фона и верхние и нижние отступы для создания промежутка между каждой полосой.
Анимационный значок
Используя CSS и JavaScript, измените значок меню на значок «Отменить/Удалить» при нажатии:
Первый шаг - добавление HTML:
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
Второй шаг - добавление 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);
}
Третий шаг - добавление JavaScript:
function myFunction(x) {
x.classList.toggle("change");
}
Пример объяснения:
HTML и CSS: мы используем те же стили, что и раньше, но на этот раз мы обернули каждый элемент <div> элементом контейнера и指定ли для каждого элемента класс.
Элемент контейнера используется для отображения значка указателя, когда пользователь наводит курсор мыши на divs (линии). При нажатии на него выполняется JavaScript-функция, которая добавляет новый класс, что изменяет стиль каждого горизонтального полосы: первая и последняя линии деформируются и вращаются в букву «x». Средние линии постепенно исчезают и становятся не видимыми.
- Предыдущая страница Панель иконок
- Следующая страница Аккордеон
