仕様
- 右上のアイコンをクリックするとメニューが表示される
- 表示中のものは×のアイコン、もしくは黒背景部分をクリックすると非表示になる
仕組み
表示したいメニューの要素にはデフォルトでright: -100%;を設定（非表示状態：右側に隠れている状態）
クリックした際にメニューの要素にクラスheader__nav--showを設定（表示状態）
×アイコン、または黒背景部分をクリックしたらクラスheader__nav--showを削除
完成形
See the Pen ハンバーガーメニュー by 引地澄佳 (@vqjkiggh-the-lessful) on CodePen.
Javascript
// ボタン要素（2つ)を全て取得
const buttons = document.querySelectorAll(".btn");
// nav要素を取得
const nav = document.querySelector(".header__nav");
// bg要素を取得
const bg = document.querySelector(".header__navBack");
// ボタンの各要素に処理
buttons.forEach((btn) => {
// ボタンの各要素にクリックイベントを設置
btn.addEventListener("click", () => {
// nav要素にheader__nav--showがなければ追加、あれば削除
nav.classList.toggle("header__nav--show");
});
});
// nav表示時に黒背景がクリックされれば、クラスheader__nav--showを削除
bg.addEventListener("click", () => {
nav.classList.remove("header__nav--show");
})
querySelectorAll
指定したCSSセレクタを持つ全ての要素を取得するメソッド
querySelector
指定したCSSセレクタと一致する最初の要素を取得するメソッド
forEach
反復処理のメソッド。指定した配列の各要素を一つずつ呼び出し、各要素に処理を与えることができる。
querySelectorAll()で取得した要素はオブジェクトに分類されるが、配列風のオブジェクトであるため例外的にforEach()を使用することができる。
addEventListener
addEventListenerはメソッドの一つで、指定した要素で指定されたイベントが発生した際に任意の処理を実行させることができる。
💡基本の書き方
イベントが発生する要素.addEventListener("イベントの種別", function() {・・・});
↓この部分
btn.addEventListener("click", function() {・・・});
アロー関数を用いて関数の記述を省略したので下記のようになる。
btn.addEventListener("click", () => {・・・});
classList
指定した要素のクラス名を含むオブジェクトを返すプロパティ。
classListプロパティはDOMTokenListオブジェクト（インターフェイス）を持っている。
というのもclassListはDOMTokenListのインスタンスなので、classListを呼び出すことでDOMTokenListも呼び出している。
DOMTokenList
スペースで区切られた属性値（クラス名など）やその属性値を操作するためのメソッドを持つオブジェクト。
（↑上記のような便利な機能がまとまっているのでDOMTokenListはインターフェイス（部品・機能）でもある）
そのメソッドがcontainsメソッドやtoggleメソッド。
DOMTokenListはクラスとして定義され、インスタンス化されており、Element.classListなどのインスタンスを使って呼び出すことができる。
インターフェイス
部品や機能の集まり
参考記事：インターフェイス
toggle
対象の要素のクラスの有無を切り替えるメソッド。
クラスの有無を判別して、なければクラスを追加、あれば削除をしてくれる。
DOMTokenListオブジェクト（インターフェイス）のメソッド(DOMTokenListという機能の一部)。
対象の要素.classList.toggle("クラス名");
remove
対象の要素から指定したクラスを削除するメソッド。
対象の要素.classList.remove("クラス名");