Переключение меню гамбургер, используя JS
Кнопка-переключатель, напоминающая гамбургер, решает проблему нехватки места для полноценного меню, на маленьких устройствах. Н этом уроке мы сделаем такую кнопку и при клике по ней заставим ее менять свой внешний вид на закрывающий крестик.
Создание кнопки-переключателя
Весь HTML код состоит из одного div с идентификатором toggle. Разместим toggle в центре экрана и зададим ему цвет.
<div id="toggle"></div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
scroll-behavior: smooth;
}
body{
background: #F0F4C3;
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#toggle{
position: relative;
width: 150px;
height: 150px;
background: #8E24AA;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
overflow: hidden;
}
Создание белых полосок
Белые полосы создаются псевдоэлементами, используя свойства transform и box-shadow.
#toggle::before {
content: "";
position: absolute;
width: 80px;
height: 6px;
background: #fff;
transform: translateY(-20px);
transition: 0.2s;
box-shadow: 0 20px 0 #fff;
}
#toggle::after {
content: "";
position: absolute;
width: 80px;
height: 6px;
background: #fff;
transform: translateY(20px);
transition: 0.2s;
}
Создание крестика
Манипулируя трансформацией и тенью, белые полоски образуют крестик.
#toggle.active::before{
transform: translateY(0px) rotate(45deg);
box-shadow: 0 0 0 #fff;
}
#toggle.active::after{
transform: translateY(0px) rotate(-45deg);
}
#toggle.active{
background: #F06292;
}
Функция переключения
Сейчас кнопка toggle имеет два состояния полосок: в виде гамбургера и в виде крестика, одновременно. Нам же надо, чтобы при клике по ней, состояния переключались с одного на другой. При клике по кнопке с идентификатором toggle, запускается следующая функция. Метод classList, добавляет класс active, если его нет и удаляет класс, если он есть. Вот и вся магия.
const toggle = document.getElementById('toggle');
toggle.onclick = function(){
toggle.classList.toggle('active');
}
Посмотрите пример на CodePen
-
Создано 14.07.2021 10:04:24
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.