JQuery 내비게이션드로워 오버레이

1 개요[ | ]

jQuery 내비게이션 드로워 오버레이
jQuery 슬라이드 메뉴 오버레이
<style>
body { margin: 0; }
body.dark { background: rgba(0,0,0,.4); }
#hamburger {
  cursor: pointer;
  font-size: 3em;
}
#close-sidenav {
  cursor: pointer;
  font-size: 3em;
  margin-top: -10px;
  float: right;
}
#sidenav {
  height: 100%; width: 200px;
  left: -200px;
  background: black;  
  position: fixed;
  transition: 0.4s;
}
#sidenav ul { margin: 0; padding: 0; }
#sidenav header, a {
  color: white;
  display: block;
  text-decoration: none;
  padding: 1em;
}
#sidenav header { background: teal; }
#sidenav a:hover { background: gray; }
</style>

<nav id="sidenav">
  <span id="close-sidenav">&times;</span>
  <header>메뉴</header>
  <ul>
    <li><a href="#">한놈</a></li>
    <li><a href="#">두시기</a></li>
    <li><a href="#">석삼</a></li>
  </ul>
</nav>
<span id="hamburger">&equiv;</span>
<div>
  <h1>jQuery 슬라이드 메뉴</h1>
  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#hamburger").click(function() {
	$("#sidenav").css("left", "0");
  $("body").addClass("dark")
});
$("#close-sidenav").click(function() {
	$("#sidenav").css("left", "-200px");
  $("body").removeClass("dark");
});
</script>
2 같이 보기[ | ]
