HAMBURGER ANIMATION

평소의 메뉴바

클릭시 변형 형태

<button type="button" class="hamburger">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</button>

.hamburger {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

.hamburger .line {
  display: block;
  width: 40px;
  height: 3px;
  background-color: #6667ab;
  margin-block: 10px;
  border-radius: 4px;
  transition: transform .5s, 
    opacity: .25s;
}

.hamburger.active .line:nth-child(1) {
  transform: translateY(13px) 
    rotate(45deg);
}

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

.hamburger.active .line:nth-child(3) {
  transform: translateY(-13px) 
    rotate(-45deg);
}

const hamburger = document.querySelector(".hamburger");
const menuIsActive = () => {
  hamburger.classList.toggle('active');
}
hamburger.addEventListener('click', menuIsActive);