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

プログラミング
Image by Stoyan Stoyanov from Pixabay

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

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

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

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

getElementByIdで指定IDの要素を取得

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

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

querySelectorで指定CSSセレクタの要素を取得

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

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

addEventListenerでイベントと実行する関数を指定

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

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

classList.add/removeでクラス名を追加/削除

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

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

タイトルとURLをコピーしました