css 햄버거 메뉴버튼 클릭 시 x버튼 (닫기버튼)으로 변경 click 이벤트 close button

 

햄버거 메뉴 x버튼으로

 

 

주로 사이드바가 열릴때 쓰는 햄버거 버튼을 

닫기버튼 (x버튼)으로 변경하는 css 소스 입니다.

 

버튼을 클릭 시에 클래스가 추가되어

첫번째와 마지막 작대기는 transform의 rotate로 회전시키고

가운데 작대기는 opcity를 0로 변경해 안보이게 처리했습니다.

 

 

html 소스입니다.

<div class="menu-wrap">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

 

css 소스입니다

.menu-wrap{
  margin-top:50px;
  margin-left:100px;
  position: relative;
  width: 28px;
  height: 16px;
  cursor: pointer;
}
.menu-wrap .line{
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #222;
  left: 0;
}
.menu-wrap .line:first-child{
  top: 0;
  transform-origin: 25% 50%;
  transition: .3s;
}
.menu-wrap .line:nth-child(2){
  top: calc(50% - 1px);
}
.menu-wrap .line:last-child{
  bottom: 0;
  transform-origin: 25% 50%;
  transition: .3s;
}


.menu-wrap.open .line:first-child{
  transform: rotate(45deg) translateX(10%);
}
.menu-wrap.open .line:nth-child(2){
  opacity: 0;
}
.menu-wrap.open .line:last-child{
  transform: rotate(-45deg) translateX(10%);
}

 

 

javascript 소스입니다.

버튼 클릭 이벤트에 클래스 추가를 합니다.

const menu = document.querySelector('.menu-wrap');

menu.addEventListener('click',function(){
  if(menu.classList.contains('open')){
    menu.classList.remove('open');
  }else{
    menu.classList.add('open');
  }

});