/* ----------------------------------------------------------
## - 01. Reset Style.
---------------------------------------------------------- */
body,html {height: 100%; margin: 0; padding: 0;}
<!doctype html>
<html lang="ko">
<head>
</head>
<body>
<div id="wrap">
<header>
<h1><a href="#">LOGO</a></h1>
<nav>
<button type="button" class="toggleNav">SHOW<button>
<ul>
<li><a href="#">Navigation01</a></li>
<li><a href="#">Navigation02</a></li>
<li><a href="#">Navigation03</a></li>
<li><a href="#">Navigation04</a></li>
</ul>
</nav>
</header>
<div id="container" class="inner">
<article id="content">
<section id="list01">
<h3>Title</h3>
<div>Contents</div>
</section>
</article>
</div>
<footer>
<div class="copyright">
<!-- Mobile Hidden -->
© onfriday.design-hi.com
</div>
</footer>
</div>
</body>
</html>
$(document).ready(function(){
$('.toggleNav').click(function(){
$('header nav ul').stop().slideToggle(400); // 연속 클릭시 애니메이션 방지.
});
});