Як зробити гамбургер кнопку на 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») приховується.

Саму реалізацію можна переглянути на цій сторінці.