【アウトプット⑱】ハンバーガーメニューの制作方法！

<header>
 <div id="nav-drawer">

     //チェックボックスにして常に非表示にしておく
     <input id="nav-input" type="checkbox" class="nav-unshown">

     //チェックボックスのラベル。ここで三アイコンを表示する
     //タップすることにより、inputがチェック状態になる  
     <label id="nav-open" for="nav-input"><span></span></label>

     //チェックボックスのラベルその2。はじめは非表示になっている。
     //inputがチェック状態になると薄黒のカバーとして表示される。
     //タップにより、inputのチェック状態が解除される        
     <label class="nav-unshown" id="nav-close" for="nav-input"></label>

     //表示される中身
     <div id="nav-content">ここに中身を入れる</div>
 </div>
</header>

css

header {
 padding:10px;
 background: skyblue;
}

#nav-drawer {
 position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
 display:none;
}

/*アイコンのスペース*/
#nav-open {
 display: inline-block;
 width: 30px;
 height: 22px;
 vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
 position: absolute;
 height: 3px;/*線の太さ*/
 width: 25px;/*長さ*/
 border-radius: 3px;
 background: #555;
 display: block;
 content: '';
 cursor: pointer;
}
#nav-open span:before {
 bottom: -8px;
}
#nav-open span:after {
 bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
 display: none;/*はじめは隠しておく*/
 position: fixed;
 z-index: 99;
 top: 0;/*全体に広がるように*/
 left: 0;
 width: 100%;
 height: 100%;
 background: black;
 opacity: 0;
 transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
 overflow: auto;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 9999;/*最前面に*/
 width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
 max-width: 330px;/*最大幅（調整してください）*/
 height: 100%;
 background: #fff;/*背景色*/
 transition: .3s ease-in-out;/*滑らかに表示*/
 -webkit-transform: translateX(-105%);
 transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
 display: block;/*カバーを表示*/
 opacity: .5;
}

#nav-input:checked ~ #nav-content {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*中身を表示（右へスライド）*/
 box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

jQueryとCSSで実装する方法

html

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="wrapper">
       <span></span>
       <span></span>
       <span></span>

<nav id="global-navi">

<ul class="menu">     

<li><a href="">トップ</a></li>


<li><a href="">概要</a></li>


<li><a href="">特集</a></li>


<li><a href="">アクセス</a></li>


<li><a href="">お問い合わせ</a></li>

       </ul>

   </nav>

</div>

css

#global-navi {
   background:#333;
   position: fixed;
   top: 0;
   right: 0px;
   width: 100%;
}
#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding:  30px 20px 25px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
/*スマホ画面で例１のハンバーガーメニューの形にする*/
@media screen and (max-width: 600px) {
#wrapper nav {
   position: fixed;
   top: 0;
   right: -300px;
   width: 300px;
   height: 100%;
   padding-top: 50px;
   background:#333;
   font-size: 16px;
   box-sizing: border-box;
   z-index: 2
}
#wrapper nav ul li {
   display:block;
   padding: 20px 28px
}

#wrapper nav ul li a {
   text-decoration: none;
   color: #ddd
}

#wrapper .btn-gnavi {
   position: fixed;
   top: 20px;
   right: 20px;
   width: 30px;
   height: 24px;
   z-index: 3;
   box-sizing: border-box;
   cursor: pointer;
   -webkit-transition: all 400ms;
   transition: all 400ms
}

#wrapper .btn-gnavi span {
   position: absolute;
   width: 30px;
   height: 4px;
   background: #666;
   border-radius: 10px;
   -webkit-transition: all 400ms;
   transition: all 400ms
}

#wrapper .btn-gnavi span:nth-child(1) {
   top: 0
}

#wrapper .btn-gnavi span:nth-child(2) {
   top: 10px
}

#wrapper .btn-gnavi span:nth-child(3) {
   top: 20px
}

#wrapper .btn-gnavi.open {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg)
}

#wrapper .btn-gnavi.open span {
   background: #fff
}

#wrapper .btn-gnavi.open span {
   width: 24px;
}
#wrapper .contents section p {
   position: absolute;
   top: 50%;
   width: 30%;
   line-height: 1.4;
   font-size: 20px;
   color: #fff;
   text-shadow: 0 0 6px #666
}

#wrapper .contents section:nth-child(odd) p {
   left: 10%
}

#wrapper .contents section:nth-child(even) p {
   right: 10%
}
}

jQuery

$(function(){
   $(".btn-gnavi").on("click", function(){
       // ハンバーガーメニューの位置を設定
       var rightVal = 0;
       if($(this).hasClass("open")) {
           // 位置を移動させメニューを開いた状態にする
           rightVal = -300;
           // メニューを開いたら次回クリック時は閉じた状態になるよう設定
           $(this).removeClass("open");
       } else {
           // メニューを開いたら次回クリック時は閉じた状態になるよう設定
           $(this).addClass("open");
       }

       $("#global-navi").stop().animate({
           right: rightVal
       }, 200);
   });
});