Новости

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