フルスクリーンオーバーレイメニュー

解説

ハンバーガーボタンをクリックすると、画面全体を覆うフルスクリーンのオーバーレイメニューが開く演出型ナビです。ナビ項目を大きなタイポグラフィで見せるため、ブランドサイトやポートフォリオなど世界観を打ち出したい場面に向きます。

動作の中心は最小限の JavaScript です。ボタンの aria-expanded 属性を true と false で切り替え、その値に応じてオーバーレイに is-open クラスを付け外しします。開閉の見た目（フェードや項目のスライド）は CSS の transition 側で表現するので、JS は状態管理だけに専念しています。ハンバーガーの2本線が×印に変わる動きも、aria-expanded を起点に CSS だけで処理しています。

使う場面とカスタマイズ

• コーポレートの企業サイト、写真家や制作会社のポートフォリオなど項目数が少なく印象を残したいサイト
• SERVICE / ABOUT などナビ項目の文字色やフォントサイズを変えてブランドに合わせる
• 背景色 #1a1a2e やオーバーレイの不透明度を調整して可読性を確保する

状態を aria-expanded で持っているためスクリーンリーダーにも開閉が伝わります。開いている間は背景のスクロールを止め、Esc キーで閉じられるようにすると操作性がさらに上がります。

使用例・適したシーン

• コーポレートサイトのグローバルナビ
• EC サイトのヘッダー
• SaaS の管理画面
• モバイル向け Web アプリ