[HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션

메뉴(햄버거 버튼) 클릭시 내비게이션이 슬라이드 되는 모바일 GNB 코드이다.

닫기 버튼 애니메이션에 노력을 기울임ㅋㅋ

 

클래스를 통해 <nav>영역을 left -100%에서 0%로 주면 슬라이드 된다.

여기에 transiton을 적용해면 자연스럽다.

닫기 버튼은 span으로 만들고 transform을 주어 메뉴버튼에서 닫기버튼으로 전환되게 만들었다.

그나자나 SCSS를 사용하다보니 CSS로 스타일링을 하려면 너무 귀찮다.

 

SCSS 왕편함!

&.on {
    left:0%;
    .btn_gnb__inner {
      transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      span {
        &:nth-of-type(1) {transform:rotate(45deg) translate(4px, 6px);-webkit-transform:rotate(45deg) translate(4px, 6px);}
        &:nth-of-type(2) {opacity:0;}
        &:nth-of-type(3) {transform:rotate(-45deg) translate(4px, -6px);-webkit-transform:rotate(-45deg) translate(4px, -6px);}
      }
    }
  }

위처럼 네스팅을 많이할 경우 코드가 좀 어려워보이긴하지만 익숙해지면 이게 더 깔끔하다.

 

 

// GNB
$('.btn_gnb').click(function(){
	if($(this).hasClass('btn_gnb_close')) {
      $(this).removeClass('btn_gnb_close');
      $('#gnb').removeClass('on');
    } else {
      $(this).addClass('btn_gnb_close');
      $('#gnb').addClass('on');
    }
 });

 

메뉴 버튼 클릭시 내비게이션을 열고 btn_gnb_close 클래스가 추가되게 조건을 주었다.

메뉴버튼(btn_gnb)를 클릭했을 때 btn_gnb_close가 있으면 내비게이션과 닫기 버튼 활성화 클래스를 removeClass하고

반대의 경우에는 addClass하여 기능이 작동하게 만들었다.

 

 

See the Pen Mobile navigation menu animation by sel (@wimmwell) on CodePen.