dropdown-menu-accessible

概要

このプロジェクトは、Vanilla JavaScript を用いて構築された、レスポンシブ対応（PC & SP）のドロップダウン付きグローバルナビゲーションメニューです。 特にアクセシビリティ（a11y）対応や、フォーカストラップの実装に重点を置いています。 テンプレートとして使えるようにしています。

主な特徴

• レスポンシブ対応（768px 以下でハンバーガーメニュー表示）
• PC & SP時もドロップダウン展開付きナビゲーション
• アクセシビリティに配慮した設計（aria-expanded, aria-hidden, aria-labelなど）
• グローバルメニュー展開時（768px以下）Tab / Shift + Tab によるフォーカストラップ
• Escapeキーでのナビゲーション閉じ処理
• Vanilla JS / HTML / SCSS のみで実装
• ドロップダウンメニューの開閉は、grid-template-rowsを使っています

スクリーンショット

パソコン表示

通常時

ドロップダウン展開時

スマートフォン表示

通常時

ドロップダウン展開時

使い方

1. クローンまたはダウンロード
   以下のコマンドを使用してください。

   git clone https://github.com/markReo-code/dropdown-menu-accessible.git
   

2. index.html をブラウザで開くだけで動作確認が可能です