Анимированная bootstrap кнопка меню «гамбургер»

2639
views

Кнопка «гамбургер» стала своего рода стандартом для мобильных версий сайтов, по нажатию на которую, появляется или скрывается меню сайта. Но стандартная кнопка в bootstrap никак не изменяется при нажатии. Ниже находится сниппет, добавляющий популярную анимацию (превращение в крестик) для данной кнопки.

Добавляем данный код в css для анимирования верхней и нижней полосы и скрытия центральной полосы кнопки при добавлении класса active:

.navbar-toggle .icon-bar:nth-of-type(2) {
    top: 1px;
}
.navbar-toggle .icon-bar:nth-of-type(3) {
  	top: 2px;
}
.navbar-toggle .icon-bar {
    position: relative;
    transition: all 200ms ease-in-out;
}
.navbar-toggle.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}
.navbar-toggle.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
}
.navbar-toggle.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}

Из коробки bootstrap, кнопка-гамбургер не имеет активного состояния при клике. Поэтому необходимо добавлять/удалять класс active при клике с помощью javascript.

$(document).ready(function () {
  $(".navbar-toggle").on("click", function () {
    $(this).toggleClass("active");
  });
});

Добавив данный сниппет в Ваш проект, кнопка будет при открытии меню превращаться в крестик.