jQuery ナビゲーション作成

<header class="header">
 <div class="header-content-wrapper">
   <h1>DHW Company</h1>
   <div id="open-button" class="open-button"><span></span></div>
   <nav>
     <div id="close-button" class="close-button">x</div>
     <ul>
       <li><a href="about.html">会社概要</a></li>
       <li><a href="service_dhw_dash.html">サービス</a></li>
       <li><a href="news.html">ニュースリリース</a></li>
       <li><a href="inquiry.html">お問い合わせ</a></li>
     </ul>
   </nav>
 </div>
</header>

↑ナビゲーションのHTML

/* header */
.header {
 height: 50px;
 width: 100%;
 background-color: #000;
}
.header h1 {
 color: #FFF;
 text-align: left;
 padding: 12px 24px;
 font-size: 1.6rem;
}
/* navigation */
.open-button, .close-button {
 display: none;
}
@media(max-width:1160px) {
 .open-button {
   display: block;
   position: absolute;
   right: 10px;
   top: 20px;
   width: 40px;
   height: 40px;
   cursor: pointer;
 }
 .open-button span, .open-button span:before, .open-button span:after {
   position: absolute;
   height: 3px;
   width: 25px;
   border-radius: 3px;
   background: #FFF;
   display: block;
   content:"";
 }
 .open-button span:before {
   bottom: -8px;
 }
 .open-button span:after {
   bottom: -16px;
 }
 .close-button {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   color: #FFF;
   font-size: 20px;
   padding: 20px;
 }
 .header nav {
   display: none;
   z-index: 1000;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #000;
   width: 70%;
   height: 100%;
   padding-top: 67px;
   box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.4);
 }
 .header nav ul li {             
   border-bottom: solid 1px rgba(255, 255, 255, 0.5);
 }
 .header nav ul li:first-child {             
   border-top: solid 1px rgba(255, 255, 255, 0.5);
 }
 .header nav ul li a {
   font-weight: 600;
   line-height: 40px;
   vertical-align: middle;
   text-decoration: none;
   color: #FFF;
 }
}

↑ナビゲーションのcss

$('.close-button').on("click", function () {
				$('.header nav').slideUp();
		});
   //表示ボタン
		$('.open-button').on("click", function () {
				$('.header nav').slideDown();
		});

↑jQueryの　ナビゲーションメニュー１個目の書き方。

    $('.close-button, .open-button').on("click",function () {
       $('.header nav').slideToggle();
   });

↑jQueryの　ナビゲーションメニュー２個目の書き方。

こっちの方が使いやすいかも。