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("");
});
});
'WEB UIUX > uiux mycodepen' 카테고리의 다른 글
[uiux codepen]2depthGnb(마우스호버시 하위메뉴 열리기) (0) | 2022.10.31 |
---|---|
[uiux codepen]tapMenu(영역클릭시 해당내용 노출) (0) | 2022.10.24 |
[uiux codepen]simplyscroll 플러그인으로 흐르는 영역, 이미지 만들기 (0) | 2022.10.22 |
[uiux codepen]아코디언 박스(마우스 호버시 영역확장) (0) | 2022.10.22 |
[uiux codepen]fixHeader(스크롤하면 변하는 헤더) (0) | 2022.10.22 |