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

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

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

完成イメージ

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

コーディング流れ

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>

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