Как сделать анимированную кнопку-бургер на сайте

Многие задаются вопросом, как сделать анимированную кнопку-бургер на сайте? В этом примере мы рассмотрим не только как создать такую кнопку, но и заставим ее быть более живой.

1 шаг. Создает нашу кнопку-бургер на HTML
<div class="burger">
  <span></span>
</div>

2 шаг. Добавляем нашему бургеру стили
.burger {
  width: 35px;
  height: 32px;
  margin: auto;
  cursor: pointer;
  position: relative;
}
.burger:before,
.burger span,
.burger:after {
  width: 100%;
  height: 4px;
  display: block;
  background: #000;
  border-radius: 2px;
  position: absolute;
  opacity: 1;
}
.burger:before,
.burger:after {
  transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
  content: "";
}
.burger:before {
  top: 4px;
}
.burger span {
  top: 15px;
}
.burger:after {
  top: 26px;
}
/* Hover */
.burger:hover:before {
  top: 7px;
}
.burger:hover:after {
  top: 23px;
}
/* Click */
.burger.cross span {
  opacity: 0;
}
.burger.cross:before,
.burger.cross:after {
  top: 40%;
}
.burger.cross:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}
.burger.cross:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5); /*for IE*/
}
.burger:focus {
  outline: none;
}

3 шаг. Подключаем библиотеку jQuery. Пропишите перед закрывающим тегом </body>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

4 шаг. Ниже нашей библиотеки подключаем наш скрипт для анимации бургера
<script>
jQuery(document).ready(function($) {
  $('.burger').click(function() {
    if(!$('.burger').hasClass('cross'))
      $('.burger').addClass('cross');
    else
      $('.burger').removeClass('cross');
  });
});
</script>

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

Iva
Iva от 26 февраля 2019 00:19
If you would like to take a good deal from this post then you have to apply these methods to your won web site. buy viagra online
Добавить комментарий

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

Кликните на изображение чтобы обновить код, если он неразборчив