グローバルナビゲーション

設定方法

グローバルナビゲーションのボタンと要素を追加します。

<button type="button" id="gnav-btn" class="js-gnavSpBtn" aria-label="サイトナビゲーションボタン" aria-controls="gnav" aria-expanded="false"></button>
<nav id="gnav"></nav>

オーバーレイに必要な要素を追加します。

<div class="l-overlay js-overlay" aria-hidden="true"></div>

グローバルナビゲーションのJavaScript設定をします。

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav",
  closeOnResize: true,
  focusTrap: ["#gnav-btn", ".js-gnav-end"],
});
new Overlay({
  button: ".js-gnavSpBtn",
  overlay: ".js-overlay",
  excludeClose: ["#gnav"],
  closeOnResize: true,
});

オプション

オプション	概要
button	トグルボタンのセレクターを指定します。
navigation	グローバルナビゲーションのセレクターを指定します。
closeOnResize	リサイズ時にナビゲーションを閉じるかを指定します。（省略可）
excludeClose	クリック無視エリアのセレクター配列を指定します。（省略可）
focusTrap	フォーカストラップのセレクターを指定します。（省略可）
closeButton	閉じるボタンのセレクターを指定します。（省略可）
activeClass	アクティブ時に付与されるクラス名を指定します。（省略可）

button（必須）

型： string

トグルボタンのセレクターを指定します。このボタンをクリックするとナビゲーションが開閉されます。

new GlobalNavigation({
  button: ".js-gnavSpBtn", // ハンバーガーメニューボタン
  navigation: "#gnav"
});

navigation（必須）

型： string

グローバルナビゲーションのセレクターを指定します。開閉対象となる要素です。

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav" // ナビゲーション要素
});

closeOnResize

型： boolean

デフォルト： false

ウィンドウリサイズ時にナビゲーションを自動的に閉じるかどうかを設定します。レスポンシブデザインでPC表示に切り替わった際に便利です。

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav",
  closeOnResize: true // リサイズ時に自動クローズ
});

excludeClose

型： Array

デフォルト： []

クリックイベントを無視するエリアのセレクターを配列で指定します。これらの要素をクリックしてもナビゲーションは閉じません。

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav",
  excludeClose: [".modal", ".dropdown"] // これらをクリックしても閉じない
});

focusTrap

型： [string, string]

デフォルト： undefined

フォーカストラップの最初と最後の要素のセレクターをタプルで指定します。アクセシビリティ向上のために、ナビゲーション内でのフォーカス移動を制限します。フォーカストラップオプションを使用するには、事前にフォーカストラップのコードを用意する必要があります。（参考：コンポーネントフォーカストラップ）

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav",
  focusTrap: ["#gnav-btn", ".js-gnav-end"] // フォーカストラップの範囲
});

closeButton

型： string

デフォルト： undefined

ナビゲーション内の閉じるボタンのセレクターを指定します。指定した要素をクリックするとナビゲーションが閉じられます。

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav",
  closeButton: ".js-closeBtn" // 閉じるボタンのセレクター
});

activeClass

型： string

デフォルト： 'is-active'

アクティブ時に付与されるクラス名を指定します。ボタンとナビゲーション要素の両方に適用されます。

new GlobalNavigation({
  button: ".js-gnavSpBtn",
  navigation: "#gnav",
  activeClass: "is-open" // カスタムアクティブクラス
});

完全な設定例

すべてのオプションを使用した完全な設定例：

new GlobalNavigation({
  button: ".js-gnavSpBtn", // トグルボタンのセレクター
  navigation: "#gnav", // ナビゲーションのセレクター
  closeButton: ".js-closeBtn", // 閉じるボタンのセレクター
  closeOnResize: true, // リサイズ時に自動クローズ
  excludeClose: [".modal"], // クリックを無視するエリア
  focusTrap: ["#gnav-btn", ".js-gnav-end"], // フォーカストラップの範囲
  activeClass: "is-active" // アクティブクラス名
});

dialogタグでグロナビを実装する問題点

グロナビの開閉ボタンが一緒の場合、グロナビを閉じようとした際に、ダイアログより下のレイヤーにあるボタンが押せなくなってしまう問題がある。これは、Top layer（最上位レイヤー）の仕様によるものである。

Top layerを解除したい場合、非モーダルダイアログ（.show()）を使用する必要があるが、::backdropなどの機能が使用できなくなり、dialogとしてのうまみがなくなる。