【Javascript】ハンバーガーメニューを作る際に使用するメソッド

まだJavascriptを使いこなせてないけどハンバーガーメニューをつくりたいなぁ

そんな時に最低限覚えておくとよいメソッドをご紹介します。

‘use strict’;で全体をstrictモードへ

スクリプト全体で strict モードを呼び出す最初に “use strict”; (または ‘use strict’;) を追加する

指定したIDを持つ要素をElementオブジェクトとして返すメソッド取得した要素に何らかの処理をおこないたい場合などに使用

ハンバーガーメニュー作成においては、menuアイコンやcloseアイコンに付けたIDから、その要素を取得します。

CSSセレクタを指定することでそのHTML要素を取得する

ハンバーガーメニュー作成においては、menuアイコンをクリックした時に、画面にかぶせるように表示させるメニューに付けるクラス名（”overlay”など）を取得します。

イベントリスナー（イベントに合わせて実行させる関数）を登録するためのメソッド発生したイベントに応じ指定した関数を実行させる

ハンバーガーメニュー作成においては、「menuアイコンをクリックした時」（イベント）に、「overlayを表示させる」という関数を実行させることができます。

特定のクラス名を追加/削除できる

ハンバーガーメニュー作成においては、 menuアイコンクリック時に、overlayクラスにshowクラスを追加、openクラスにhideクラスを追加などできます。（closeアイコンクリック時はaddでなくremoveでそれぞれのクラスを外す）