コピペで簡単！ハンバーガーメニュー実装（jquery）


#コピペ可！jqueryを使った簡単なハンバーガーメニュー実装

備忘録として書いておきます。

>完成イメージ

①右上のハンバーガーメニューをクリックすると、
②横3本線が×印に変化し背景が黒く覆われたサブメニューが表示されるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148803/b3ec4ffd-39a5-1ec4-b211-477243bd662d.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2148803/be6056f4-884a-e3d1-1052-3252ca2dd9df.png)


##コーディング流れ
###1.まずheadにjqueryリンクを用意
```<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
```

###2.HTMLでハンバーガーメニューを作る
⇒`span`×3を記述
###3.ハンバーガーメニュークリック時に出るサブメニュー

    <div class="sp_menu">
    
      <div class="hamburger">
         <span></span>
         <span></span>
         <span></span>
      </div>

       <nav class="globalMenuSp">
         <ul>
            <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>

###4.CSSで装飾

```
.nav{
  display: none;
}
.sp_menu{
  display: flex;
  margin-top: 10px;
  justify-content: center;
}

/*ハンバーガーメニュー*/
.hamburger {
display : block;
position: fixed;
z-index : 3;
right : 13px;
top   : 12px;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;
position: absolute;
width   : 30px;
height  : 2px ;
left    : 6px;
background : #ddd;
font-weight: bold;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 30px;
}

/* ナブ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 6px;
background :#fff;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
background :#fff;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}

nav.globalMenuSp {
position: fixed;
z-index : 2;
top  : 0;
left : 0;
color: #fff;
background: rgba(0,0,0,0.7);
text-align: center;
width: 100%;
height: 100vh;
background-size: cover;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
margin: 0 auto;
padding: 0;
width: 100%;
margin-top: 50px;
display: block;
}

nav.globalMenuSp ul li {
list-style-type: none;
padding: 0;
width: 100%;
transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
background :#ddd;
}

nav.globalMenuSp ul li a {
display: block;
color: #fff;
padding: 1em 0;
text-decoration :none;
}

nav.globalMenuSp.active {
opacity: 100;

}
```

###5.HTMLに戻りbody最下層に以下記述

```
<script>
      $(function() {
        $('.hamburger').click(function() {
            $(this).toggleClass('active');
     
            if ($(this).hasClass('active')) {
                $('.globalMenuSp').addClass('active');
            } else {
                $('.globalMenuSp').removeClass('active');
            }
        });
    });
 </script>
```


今回は初めての投稿だったので今のところはこれで終わり。
慣れてきたらリメイクしていきます。