Анимированный переключатель меню на JavaScript
На этом уроке мы сделаем нестандартную анимацию для переключателя меню-гамбургер на языке JavaScript.
Создание переключателя
Создадим саму кнопку-переключатель toggle и внутри неё три полоски - теги span. Чтобы кнопка-переключатель toggle оказалась в центре страницы, сделаем body флексовым контейнером и зададим ему нужные свойства.
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;/*сетка flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
flex-wrap: wrap;/*можно переносить на новую строку*/
min-height: 100vh;/*на всю высоту*/
background: #f5f5f5;/*цвет фона*/
}
.toggle{
position: relative;/*относительное позиционирование*/
width: 70px;/*ширина переключателя*/
height: 70px;/*высота переключателя*/
background: #ad1457;/*цвет переключателя*/
border-radius: 10px;/*скругление углов*/
box-shadow: 0 10px 20px rgba(0,0,0,0.1);/*тень*/
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
}
Нарисуем полоски
Пока визуально мы видим только одну белую полоску, остальные две находятся под верхней полоской.
.toggle span {
position: absolute;/*абсолютное позиционирование*/
width: 40px;
height: 4px;
background: #fff;
display: block;/*отображать как блочный элемент*/
border-radius: 4px;
transition: 0.5s;/*плавность анимации*/
}
Обратимся к первому и второму элементу span через псевдокласс nth-child и поменяем позицию полосок по вертикали, немного укоротив их.
.toggle span:nth-child(1){
transform: translateY(-15px);/*сдвиг по вертикали*/
width: 25px;/*ширина полоски*/
left: 15px;/*позиция слева*/
transition-delay: 0s;/*задержка трансформации*/
}
.toggle span:nth-child(3){
transform: translateY(15px);
width: 15px;
left: 15px;
transition-delay: 0s;
}
Состояние полосок для класса active
Подготовим позицию полосок, после клика на переключатель.
.toggle.active span:nth-child(1) {
transform: translateY(0) rotate(45deg);/*сдвиг и поворот*/
width: 40px;
transition-delay: 0.125s;
}
.toggle.active span:nth-child(3) {
transform: translateY(0) rotate(315deg);
width: 40px;
transition-delay: 0.25s;
}
.toggle.active span:nth-child(2) {
transform: translateX(60px);
transition-delay: 0;
}
JavaScript код
И наконец напишем функцию, которая при клике на меню переключит одно состояние на другое. Найдем в документе переключатель toggle, занесем его в переменную menuToggle. Когда наступит событие клика, функция добавит переключателю класс active со всеми CSS-свойствами.
let menuToggle = document.querySelector('.toggle');
menuToggle.onclick = function(){
menuToggle.classList.toggle('active')
}
Посмотрите пример на CodePen
-
Создано 18.02.2022 10:59:05
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.