JavaScriptでハンバーガーメニューボタン作成

ハンバーガーメニュー難しいですよね

今回はHTML+CSS+JavaScriptでハンバーガーメニューを実装する方法を学習したので、書き留めておきたいと思います。
ちなみに学習したのは皆さんご存じこちらのCodestepさんです。

ハンバーガーメニューの記事はたくさんあるんですが、とりあえずコピペして分かったつもりになって自分で実装しようとしたらまたコピペしてみたいになってませんか？
JavaScriptのイベントや変形の勉強もしながら一緒に学習していきましょう。
ということでコードの説明は最後に書きますので、できるだけわかりやすく紹介できればと思います。
HTMLとCSSについてはある程度学習ができている前提で説明をしていきます。

コードはいったん無視して完成物を確認してください

See the Pen Untitled by soichiro-saeki (@soichiro-saeki) on CodePen.

完成物の概要

・ハンバーガーメニューボタンのクリックイベント作成
・表示されたメニュー以外の部分をクリックしたときにメニューを閉じる
・メニューにあるリンクをクリックしたときにメニューを閉じる

※今回はjQueryを利用しています。
jsは難しいから他に方法ない？という方は、cssだけでも実装できるハンバーガーメニューもあるので調べてみて下さい。また、jQueryはモダン技術ではないです。なのでフロントエンドの学習をメインでしている方はReactなどで作成する勉強が必要だと思います。ただ、考え方自体は参考になると思います。

まずはHTMLとCSSについて確認していきましょう。

See the Pen Untitled by soichiro-saeki (@soichiro-saeki) on CodePen.

HTMLについては特に特筆すべき点はないかと思いますが、CSSを確認していただくとHTMLにはないタグをセレクタとして選択していますね。

.open .toggle_btn span {
  background-color: #fff;
}

.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}

.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}

.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}

#mask {
  display: none;
  transition: all .5s;
}

.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 10;
  cursor: pointer;
}

.openなんてタグはHTMLにないぞということなんですが、ここでJavaScriptを使いクリックイベントが発生した際にheaderにopenというクラス属性を付けたり外したりすることでハンバーガーメニューの表示非表示を繰り返す方法を取っています。
こちらも色々やり方はあるかと思いますので、他の方法も同じく検索してみてください。

では、どのようにしてハンバーガーメニューを表示させるのか

下記コードをみていただくと分かるかとおもいますが、トグル(操作を繰り返すような意味)ボタンを押した際にヘッダーがopenクラスを持っている(hasClass)場合はopenクラスを取り除き(removeClass)、逆にopenクラスを持っていない場合にはopenクラスをもたせる(addClass)ことでメニューの呼び出しをしているかのように表現することができます。

$(function () {
  // ハンバーガーメニューのクリックイベント
  $('.toggle_btn').on('click', function () {
    if ($('#header').hasClass('open')) {
      $('#header').removeClass('open');
    } else {
      $('#header').addClass('open');
    }
  });

  // #maskのエリアをクリックした時にメニューを閉じる
  $('#mask').on('click', function () {
    $('#header').removeClass('open');
  });

  // リンクをクリックした時にメニューを閉じる
  $('#navi a').on('click', function () {
    $('#header').removeClass('open');
  });
});

ポイントはクラスの付け外しでCSSを反映させることができるということです！

これを活用すればいろいろな遊び心あふれるサイトがつくれそうです。

ちなみにハンバーガーメニューのボタンを押すと上と下の線が回転してバツ印になる挙動も使っているので、気になる方はそちらも学習してみてください。
※ヒントはtransform

是非皆さんもハンバーガーメニュー試してみて下さい！