超簡単!ハンバーガーメニュー

こんにちは!
今回はハンバーガメニューを作成していきたいと思います。
スライドで表示させるメニューについては触れません。
あくまでクリックした時に、3本線から❌に変化するコードを書きます。

最終的なコード

デモページ

index.html

  <div class="ham" id="hamMenu">
    <span class="line top"></span>
    <span class="line middle"></span>
    <span class="line bottom"></span>
  </div>

index.css

    .ham{
      position: relative;
      text-align: center;
      width: 100px;
      height: 100px;
      cursor: pointer;
    }

    .line{
      position: absolute;
      width: 100px;
      height: 2px;
      background-color: black;
      transition: ease-in-out 0.5s;
    }
    /*- transitionが適用されるまでに0.5sかかるということになる-*/


    /*-----click前--------*/
    .top{
      top: 20px;
    }

    .middle{
      top: 40px;
    }

    .bottom{
      top: 60px;
    }

    /*-----click後----*/

    .close .top{
      transform: rotate(-135deg);
      top: 50px;
    }

    .close .middle{
      opacity: 0;
      transform: translateX(70px);
      top: 50px;
    }

    .close .bottom{
      transform: rotate(135deg);
      top: 50px;
    }

index.js

  const ham = document.getElementById('hamMenu');

  ham.addEventListener('click', () => {
    ham.classList.toggle('close');
  });

解説

ハンバーガーメニューのメインとなる3本線ですが、htmlを見てもらうとわかるようにspanタグを使って表現します。

hamクラスをposition: relative;で基準としてposition: absolute;でズラして三本線にします。高さを変えるのはcssを見て貰えばわかる通り、top, middle, bottomで変更しています。
これはlineクラスに対して、positionをabsoluteにしているからです。
何も指定しなかったら3本が重なっている状態になるので気を付けてください。

❌印

複雑に見えますが、実際は単純な動作で上の線と下の線をそれぞれ45度傾けさせているだけです。

クリックした時に変化させたいので、javascriptを用いて、クリックした時にcssを付与するようにしましょう。

index.js

// hamMenuを取得します。これでhtmlでこのidを指定している要素に対しての処理を描くことができます。
  const ham = document.getElementById('hamMenu');

//addEventListenerを使って、idがhamMenuの要素がクリックされたら,,,という処理を描くことができます。
  ham.addEventListener('click', () => {
    ham.classList.toggle('close');
  });
//classList.toggle('class名');
//とすることで、クラス名があれば削除、なければ付与といった処理が行われます

要素に対して、動きを与えたい時はtransformを使います。
今回は回転させる動作をしますが、他にも色を変えたり、透明にしたり、サイズを変えたり横に移動したりと色々なことができます。
角度を変えるにはtransformプロパティのrotateを使います

ここで、lineクラスにtransitionを指定するのを忘れないでください。
指定しなくても問題はないのですが、trantitionを指定することで動き方、transformする時間を指定できます。

1番上の線にtransform: rotate(45deg);これで45度の回転ができます。
今回は少し動きを変えたいので-135としています。どちらも試してみてください

下の線も同じようにtransform: rotate(45deg);としたいのですが、これだと❌に見えません。なので、反対方向に回転させるようにしましょう。transform: rotate(-45deg);とすることで逆回転させることができます。
今回は135とします。

ここで一度確認してください。
回転はちゃんとするけれど、うまく❌にならないことがわかると思います。

これは回転する時に、線の端を基準としているのではなく、要素の中間を基準としているからです。
線の幅に対する値は、100pxとなっているので、同じように.close .topと.close .bottomにも　50pxを指定します。

cssファイルで、.close .topとしているのは、.close クラスの中の.topクラスという解釈ができるからです。つまり.closeが付与された時の.topの挙動ということです。

これで❌にすることができました!

仕上げに真ん中の線も消してあげましょう！
.close .middleにopcity: 0;とすることで透明になり、見えなくすることができます。
それに加えて、transform: translateX(70px);とすることでX軸方向に70px移動しながら透明になる。という動作を描くことができます。

以上でハンバーガーメニューの実装は完了です！

おまけ

回転量を、135や405、1125と指定してみてください。ぐるぐる回るはずですw
こんな感じで消え方も動き方も変えることができるので、試してみてください!
今回はブラウザの右側に実装することを想定して作ったので、左側に追加したい人は数値の正負を逆にすることでうまくいくかもしれません！