ВебмастерскаяСекреты вебмастера

Анимированный переключатель меню на JavaScript

Анимированный переключатель меню на 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;
}

Анимированный переключатель меню на JavaScript

Нарисуем полоски

Пока визуально мы видим только одну белую полоску, остальные две находятся под верхней полоской.

.toggle span {
    position: absolute;/*абсолютное позиционирование*/
    width: 40px;
    height: 4px;
    background: #fff;
    display: block;/*отображать как блочный элемент*/
    border-radius: 4px;
    transition: 0.5s;/*плавность анимации*/
}

Анимированный переключатель меню на JavaScript

Обратимся к первому и второму элементу 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;
}

Анимированный переключатель меню на JavaScript

Состояние полосок для класса 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

JavaScript код

И наконец напишем функцию, которая при клике на меню переключит одно состояние на другое. Найдем в документе переключатель toggle, занесем его в переменную menuToggle. Когда наступит событие клика, функция добавит переключателю класс active со всеми CSS-свойствами.

let menuToggle = document.querySelector('.toggle');
menuToggle.onclick = function(){
    menuToggle.classList.toggle('active')
}

Посмотрите пример на CodePen

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button