ハンバーガーメニューの実装

過去に何度か実装していますが、実装手順を記録しておきます。

制作中の練習用サイトで実装しています。↓
https://skblogwp.com/practice/

HTML
CSS
jQuery

HTML

<div class="toggle">
  <span></span>
  <span></span>
　<span></span>
</div>
<div class="sp_nav">
　<nav class="sp_nav_inner">
  　<ul>
　　　<li><a href="/practice/">HOME</a></li>
　　　<li><a href="/practice/htmlandcss/">HTML・CSS</a></li>
　　　<li><a href="/practice/javascript/">JavaScript</a></li>
      <li><a href="/practice/programming/">programming</a></li>
      <li><a href="/practice/others/">others</a></li>
　　</ul>
   </nav>
</div>

CSS

/*ハンバーガーメニューの箱を作成する*/
.toggle{
    width: 20%;　/*親要素の.header_innerの中で、横幅をh1と.toggleで8:2で指定*/
    position: relative; /*親要素にrelativeを指定する。*/
    z-index: 4;  /*sp_navより下にあると、ハンバーガーメニューを閉じることが出来ない。*/
}

/*ハンバーガーメニューの下に「menu」という文字を入れる*/
.toggle::after{
    position: absolute;　/*.toggleの中で、絶対配置したい*/
    width: 100%;　/*横幅を親要素いっぱいに確保したい*/
    text-align: center;　/*中の文字を中央配置にしたい*/
    top: 60px;　/*上から60pxの位置に配置したい*/
    content: "menu";
    color: #fff;
}

/*ハンバーガーメニューの3本線の1本を作成する*/
.toggle span{
    display: block;
    position: absolute;
    left: 0;  /*絶対配置した要素の中央寄せ*/
    right: 0; /*絶対配置した要素の中央寄せ*/
    margin: auto; /*絶対配置した要素の中央寄せ*/
    width: 35px;
    border-bottom: solid 2px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;　/*0.35秒間のCSSアニメーション。最初と最後がゆっくりになる動き*/
}

.toggle span:nth-child(1){
    top: 35px;
}

.toggle span:nth-child(2){
    top: 45px;
}

.toggle span:nth-child(3){
    top: 55px;
}

/*.toggle.activeのspanの状態を指定*/
.toggle.active span:nth-child(1) {
    top: 45px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: solid 2px #fff;
}

/* 2番目と3番目のspanを45度に */
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {
    top: 45px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom: solid 2px #fff;
}

/*メニューに対する指定を行う */
.sp_nav{
    position: fixed;
    z-index: 3;
    top: 0;
    right: 0;
    background-color: #111111;
    opacity: 0.9;
    width: 80%;
    height: 100%;
    transform: translateX(100%);　/*普段は、右横方向100％の位置にいる（見えない）*/
    transition: all 0.6s;　/*0.6秒で変化する*/
}

.sp_nav a{
    color: #fff;
}

.sp_nav.active{
    transform: translateX(0%);　/*.activeになると、右横方向0％の位置にいる（そのままの位置）*/
}

.sp_nav_inner{
    padding-top: 95px;
    transform: translateX(100%);　/*普段は、右横方向100％の位置にいる（見えない）*/
    transition: all 1.2s;　/*1.2秒で変化する*/
    width: 80%;
    margin: 0 auto;
}

.sp_nav_inner.active{
    transform: translateX(0%);　/*.activeになると、右横方向0％の位置にいる（そのままの位置）*/
}

.sp_nav_inner li{
    height: 5.2em;
    line-height: 1.5em;
    display: grid; /*2行の文字の上下中央寄せ。左右も中央寄せになる*/
    place-items: center; /*2行の文字の上下中央寄せ。左右も中央寄せになる*/
    text-align: center; /*1行目と2行目が左寄せになるので、それぞれ中央寄せして不揃いを解消*/
    border-bottom: 1px solid #333;
}

jQuery

$(function () {　　
//すべてのjsファイルの大前提。DOM（HTML）がすべて読み込み完了後にjsを実行しなさい。
という意味。

    //start
    let $btn=$(".toggle");　
//クラス名が "toggle" という要素を探し、それらの要素を $btn という変数に格納
    $btn.on("click",function(){ 
//$btn 変数に含まれる要素がクリックされたときに、指定された関数を実行するように設定
        $(this).toggleClass("active");  
//クリックされた要素自体 (this) に "active" クラスが既に存在する場合は、
そのクラスを削除し、存在しない場合は追加します。
つまり、クリックされるたびに "active" クラスの有無がトグルされます。
        $(".sp_nav").toggleClass("active");
        $(".sp_nav_inner").toggleClass("active");
    });
    //finish

});

「トグル」とは、ある同じ操作を繰り返すことで、機能や状態のON/OFFを切り替える仕組みのことです。