Анимация бургер меню на CSS и JavaScript

Комментариев нет

15224

Всем привет. В этой статье вы узнаете как сделать бургер меню на CSS. Отрисуем саму иконку и добавим ей анимацию при нажатии. JS нужен будет для того, чтобы вызвать какое-то событие по клику, к примеру показать/скрыть меню на сайте. Вот как это выглядит:

Демо

Приступим. В разметке создадим блок, в который поместим пустой элемент спан, к нему добавим псевдоэлементы before и after, это и будет нашим бургер меню на CSS.

HTML

1
2
3

<div class="burger">
  <span></span>
</div>

CSS

.burger{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.burger span, .burger span:before, .burger span:after{
  width: 100%;
  position: absolute;
  height: 10px;
  background: #333;
  display: block;
  transition: .3s;
  border-radius: 5px;
}
.burger span:before{
  content: "";
  top: -20px;
  transition: top 300ms 300ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.burger span{
  top: 20px;
}
.burger span:after{
  content: "";
  bottom: -20px;
  transition: bottom 300ms 300ms, transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

Иконка бургер меню готова. Теперь нужно задать ей свойства анимации. Для этого создадим специальный класс, который будем добавлять нашей иконке при клике на нее.

CSS

.burger span.active:before{
  content: "";
  top: 0px;
  transform: rotate(45deg);
  transition: top 300ms, transform 300ms 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.burger span.active:after{
  content: "";
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms, transform 300ms 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.burger span.active{
  background: rgba(255, 255, 255, 0); 
}

Анимация бургер меню готова. Осталось добавить несколько строчек JavaScript кода, чтобы оживить нашу иконку.

1
2
3

document.querySelector('.burger').addEventListener('click', function(){
  document.querySelector('.burger span').classList.toggle('active');
})

Вот, собственно, и вся магия. Теперь, к уже имеющейся JS функции можно добавить еще одно событие, которое будет что-то вызывать. Это может быть все, что угодно, но чтобы не нарушать логику мы сделаем мобильное меню.

HTML

<div class="menu"></div>

CSS

.menu{
  width: 300px;
  height: auto;
  background: #333;
  color: #ccc;
  padding: 10px;
  position: fixed;
  left: -320px;
  transition: left 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu.animate{
  left: 0;
}

document.querySelector('.menu').classList.toggle("animate");

Отлично. Теперь вы знаете, как сделать полноценное бургер или гамбургер меню на CSS и анимировать его при помощи JavaScript или jQuery. Анимация может быть какой угодно, это дело вкуса. Но мне нравится этот вариант.

Любая сумма на развитие сайта

Категории: Уроки Тэги: CSS JavaScript

Анимация бургер меню на CSS и JavaScript

Читайте также:

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