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