ハンバーガーメニュー（クリックでふわっと現れる）【jQuery】

今回は、

・ハンバーガーメニューの実装方法が分からない。

・コピペしたい

・jQuery分からない

方のためにコピペで使用できるコードを準備しました！

今まで、LPやサイトを約20ページ程コーディングしてきました。
コーディングで一番時間がかかっていたのが、メニュー部分です。

メニューはどのサイトにもあり、
私の場合は全案件でハンバーガーメニューの実装があったので、
ここを押さえておくことでかなり時短になります。

今回紹介するハンバーガーメニュー
コード（コピペ可）
1. ①PCでもスマホでもハンバーガーメニュー
2. ②スマホ（タブレット以下）のみハンバーガメニュー
仕組み
その他　参考になるサイト

今回紹介するハンバーガーメニュー

今回紹介するハンバーガメニューは、

・ボタンをクリックするとボタンが×になって、ふわっとメニューが現れる。
（×ボタンをクリックすると閉じる）

・メニューバーは画面の上に固定しておく。

・ハンバーガーボタンになるタイミングは２種

　①PCでもスマホでもハンバーガーメニュー

　②スマホ（タブレット以下）のみハンバーガメニュー

コード（コピペ可）

①PCでもスマホでもハンバーガーメニュー

See the Pen ハンバーガーメニュー（PC） by emi (@emi-jp) on CodePen.

②スマホ（タブレット以下）のみハンバーガメニュー

ブログ記事に埋め込むと①と同じに見えますが、
コードは、タブレット以下(768px以下)のみハンバーガメニューとなります。

※HTMLコードは①と同じです

See the Pen ハンバーガーメニュー（タブレット以下） by emi (@emi-jp) on CodePen.

PC時のメニュー↓

仕組み

※下記仕組みの説明であって、コピペしても上記とは同じになりません。
（CSSを一部しか書いていないため）

①メニュー作成（menu-lists）
→displey:none;　で隠しておく。

HTML↓

                <nav class="menu-lists">
                    <ul>
                        <li><a href="#">HTMLについて</a></li>
                        <li><a href="#">CSSについて</a></li>
                        <li><a href="#">jQueryについて</a></li>
                    </ul>
                </nav>

CSS↓

    .menu-lists{
        display: none;
    }

②クリック用ボタン（btn）作成

HTML↓

                <div class="btn">
                    <span class="bar bar-top"></span>
                    <span class="bar bar-middle"></span>
                    <span class="bar bar-bottom"></span>
                </div>

CSS↓

.btn{
    width: 100%;
    display: block;      
    width: 39px;      
    height: 39px;      
    position: absolute;
    right: 0;
    z-index: 999;/*追記：いつも一番上*/
}
  
.bar{      
    width: 20px;      
    height: 1px;        
    display: block;      
    position: absolute;      
    left: 50%;      
    transform: translateX(-50%);      
    background-color: #000;    
}
  
.bar-top{ top: 10px;}
.bar-middle{    
    top: 50%;
    transform: translate(-50%,-50%);
}
.bar-bottom{ bottom: 10px;}

③ボタンが✖︎になるCSSを書いておく

.btn.close .bar-top{      
    transform: translate(-50%,10px) rotate(45deg);      
    transition: transform .3s;    
}  

.btn.close .bar-middle{      
    opacity: 0;       
    transition: opacity .3s;    
}    

.btn.close .bar-bottom{      
    transform: translate(-50%,-8px) rotate(-45deg);      
    transition: transform .3s;    
}

④ボタン(②)をクリックすると、
メニュー(①)がdisplay:block;で出てくるようにする＜jQuery使用＞

jQuery↓

$(function() {
$('.btn').on('click',function(){　　// .btnをクリックすると〜
    $('.btn').toggleClass('close');　　// .btnにcloseというクラスが追加される
    $('nav').fadeToggle(500);　　// navの表示・非表示切り替わる
  });
});