[uiux codepen]gnbMenu바(모바일 햄버거메뉴 열리게하기)

See the Pen [jQuery]gnbMenu by kaia (@kaiaakim) on CodePen.

<div class="contents">
  <a href="#" class="menuOpen">MENU<span class="lnr lnr-menu"></span></a>
  <nav class="gnb">
    <a href="#" class="close"><span class="lnr lnr-cross"></span></a>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
    <li><a href="#">menu5</a></li>
    <li><a href="#">menu6</a></li>
  </nav>
</div>

*{
  padding: 0; margin: 0;
}
a{
  color: inherit; text-decoration: none;
}
li{
  list-style: none;
}
.contents{
  width: 100vw; height: 100vh; background: #eee;
  position: relative; overflow: hidden;
}
.menuOpen{
  display: block; 
  position: absolute; right: 50px; top: 20px;
  font-size: 30px;
}
.gnb{
  width: 30%; height: 100vh;
  padding: 70px 100px;
  position: absolute; right: -100%; top: 0;
  transition: all 0.5s; z-index: 200;
  color: #fff; background: #000;
}

/* on */
.gnb.on{
  right: 0; 
  transition: all 0.5s;
}

.gnb .close{
  font-size: 40px; float: right; color: #fff;
  display: block;
}
.gnb li{
  margin: 50px 0;
}
.gnb li a{
  width: 100%; height: 100%;
  font-size: 40px; text-transform: uppercase;
  display: block;
}

$(function(){
  $(".menuOpen").on('click',function(){ //어떠한이벤트롤 불러올때 사용하는 메소드 - .on();
    $(".gnb").addClass("on"); //class추가 - .addClass("");
  });
  $(".close").on('click',function(){ //on 이벤트가 붙은대상을 클릭했을때 다음의 스크립트를 실행해라~
    $(".gnb").removeClass("on"); //class제거 - .removeClass("");
  });
});