Как сделать гамбургер кнопку на HTML и CSS

В данной статье рассмотрим простейший пример реализации анимированный кнопки-гамбургер (hamburger).

Похожие кнопки вы наверняка встречали в сайтах с мобильной адаптацией. В bootstrap 3/4 версии так же можно найти такую кнопку.

Для реализации данной кнопки нам понадобятся:

1. HTML
2. CSS3 (в примере будем использовать SCSS)
3. JavaScript (а точнее jQuery)

Как наша кнопка выглядит в HTML:

<div class="hamburger">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</div>

Ничего сложного здесь нет:
DIV с классом «hamburger» - сама наша кнопка с заранее заданными размерами.
SPAN с классом «hamburger-line» - линии кнопки.

Далее идет наш SCSS код:

.hamburger {
  width: 30px;
  margin: 0 auto;
  
  &-line {
    width: 100%;
    height: 4px;
    background-color: #158100;
    display: block;
   
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
    &:nth-child(2){
       margin: 6px auto;
    }
  }
  
  &:hover{
    cursor: pointer;
  }

  &.hamburger-active .hamburger-line:nth-child(2){
    opacity: 0;
  }

  &.hamburger-active .hamburger-line:nth-child(1){
    -webkit-transform: translateY(10px) rotate(40deg);
    -ms-transform: translateY(10px) rotate(40deg);
    -o-transform: translateY(10px) rotate(40deg);
    transform: translateY(10px) rotate(40deg);
  }

  &.hamburger-active .hamburger-line:nth-child(3){
    -webkit-transform: translateY(-10px) rotate(-40deg);
    -ms-transform: translateY(-10px) rotate(-40deg);
    -o-transform: translateY(-10px) rotate(-40deg);
    transform: translateY(-10px) rotate(-40deg);
  }
}

для не новичка, выше указанный код проблем создать не должен. Но для тех кто далек от CSS немного поясню:

1. Свойство «transition» обеспечивает нам анимацию
2. Свойство «transform» позволяет нам трансформировать элементы
3. А «:nth-child» - псевдо класс.

И на конец JavaScript код в исполнении jQuery:

$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("hamburger-active");
  });
});

здесь, по клику на гамбергере, мы добавляем или удаляем с него класс «hamburger-active». Которому в CSS задана анимированная трансформация с поворотом на 45 градусов первой и третей линии. А вторая полоска (SPAN с классом «hamburger-line») у нас прячится.

Саму реализацию можно найти на этой странице.