(css, js) 햄버거 메뉴 애니메이션 만들기

1. 미리보기

메뉴에서 많이 쓰이는 햄버거 메뉴 애니메이션을 만들어보자!
이 애니메이션을 만들기 위해서는 transform을 사용해야한다.

See the Pen by KumJungMin (@kumjungmin) on CodePen.

2. 코드 설명

(1) html

• label의 for="checkbox_id"를 이용하면, label 영역을 클릭시 checkbox가 checked가 된다.
• label 내부에 3개의 bar들을 배치한다.

  <div class="frame">
  <div class="center">
    <label class="menu-wrap" for="check-menu">
      <input class="check-menu" type="checkbox" id="check-menu">
      <div class="menu-bar"></div>
      <div class="menu-bar"></div>
      <div class="menu-bar"></div>
    </label>
  </div>
  </div>

(2) css

• translate(x축, y축)을 이용해 요소의 위치를 변경할 수 있다.
• rotate(각도)를 사용해 요소를 회전시킬 수 있다.

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.menu-wrap {
  cursor: pointer;
  .check-menu {
    display: none;
  }
}

.menu-bar {
  width: 5rem;
  height: 0.7rem;
  margin-bottom: 3px;
  border: 0.1rem solid #F5F5F5;
  background-color: #fff;
  border-radius: 5px;
  transition: 0.5s;
}
.top-bar {
  transform: translate(0, -1rem) rotate(-45deg);
}
.middle-bar {
  transform: scale(0);
}
.last-bar {
  transform: translate(0, 1rem) rotate(45deg);
}

(3) js

• checkbox를 클릭했을 때 tranform 클래스를 추가한다.

  let clickBox = document.querySelector('.check-menu');
  let menuBar= document.querySelectorAll('.menu-bar');
  let animateClass = ['last-bar', 'middle-bar', 'top-bar'];

  clickBox.addEventListener("click", function() {
    for(let i=0; i<menuBar.length; i++) {
        menuBar[i].classList.toggle(animateClass[i]);
      }
  })