ハンバーガーメニューの作り方【JavaScript】

JavaScriptを用いたハンバーガーメニューの作り方についてサンプルコードを用いて解説します。

サンプル

今回紹介するサンプルとソースコードは以下の通りです。
👉右上の『EDIT ON COAD PEN』を押すと別タブで大きな画面で確認できます。

See the Pen PoNMRPL by takano (@takano04) on CodePen.

コードの解説

以下のJavaScriptのコードについて順番に解説します。

'use strict';
{
  const open = document.getElementById('open');
  const overlay = document.querySelector('.overlay');
  const close = document.getElementById('close');

  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });

  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
}

1行目の「‘use strict’」は、より厳格なエラーチェックが行われるようにする記述なので、JaraScriptのコードを書く際に冒頭に書いておくと良いです。

定数の定義

3～5行目は「const 定数名 = ～;」の形式で記述されていますが、これは定数の宣言です。3行目であれば、右辺の「document.getElementById(‘open’);」を「open」という定数に格納するという意味です。一度格納しておけば、後から呼び出すときは、定数名を書くだけなので楽ですね。

「document.getElementById(‘open’);」はopenというidの要素を取得するという意味です。

Classを取得する場合は4行目のように「querySelector」を使用します。尚、名前が合致した一番最初のクラスを取得した時点で処理を終了するので、複数の箇所に適応させることはできません。

クリックイベント

7行目からは要素をクリックしたら「～を実行する」というクリックイベントを使用しています。

「addEventListener」の形式は、以下のように第一引数でイベントの種類、第二引数で関数、第三引数でオプション（falseかtrueのどちらを指定しますが、省略した場合falseになる）。第二引数の「function(){}」は「() =>{}」のように省略形で表すこともできます。

要素.addEventListener(イベントの種類, function(){処理内容}, オプション);

8行目で使用している「classList」というプロパティは指定した要素に対してクラスを追加したり削除したりできます。クラスを追加する場合はclassListの後に「add」、削除する場合は「remove」をつけます。

まとめ

コードの意味をまとめると、以下のようになります。

• id名openの要素をクリックしたら、overlayクラスにshowクラスを追加し、openクラスにhideクラスを追加する。
• id名closeという要素をクリックしたら、overlayクラスからshowクラスを削除し、openクラスからhideクラスを削除する。

あとは、クラスが追加された時の表示をCSSで変更するようにすればハンバーガメニューを作成することができます。