グローバルナビゲーション２
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
グローバルナビゲーション２
こちらは、クリックするとナビゲーションが画面全体に展開するタイプ――いわゆるフルスクリーンメニューのデモ集です。省スペースなモバイルUIの延長にありながら、開いた瞬間に世界観を見せられるため、ブランドサイトやポートフォリオで定番になりました。スライド方向や円形に広がる背景など、展開の演出パターンを網羅しています。
見どころは「開く前」と「開いた後」の状態設計です。メニューが全面を覆う以上、背面のコンテンツはその間、操作も閲覧もできない状態になります。この切り替えをどう自然に見せるかが、この種のUIの品質を決めます。
前回に続きグローバルナビゲーションです。 今回はハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示（拡大表示）されるアニメーションを作りました。
おさえておきたいところ
前回と同様、グローバルナビゲーションを使う目的と使いどころはこんな感じです。
目的：サイト全体の構成を分かりやすく伝える
使いどころ：画面の読み込み中 / クリック / マウスオーバー / スクロール / 画面のリサイズ
クリックしたらナビがスライド表示
上から下
下から上
左から右
右から左
背景が全面に広がる
クリックしたら円形背景が拡大
上から
下から
右から
左から
右上から
右下から
左上から
左下から
中央から
クリックしたらナビ背景コンテンツがぼかされる ※IE11非対応
追従メニューの現在地をハイライト表示する
実務メモ（2026年追記）
いま全画面メニューを実装・保守するなら、まずinert属性を知っておく価値があります。メニュー表示中に背面のコンテンツへinertを付けるだけで、フォーカスも操作も無効化でき、かつてJSで頑張っていた「フォーカストラップ」が大幅に簡単になりました。また、背面のスクロールを止めるoverflow:hiddenは、スクロールバーの幅の分だけ画面がガタつくことがあるため、scrollbar-gutterでの予約が現在の解決策です。
- 開閉トリガーは
<button>要素＋aria-expandedで（divのclickは不可） - ESCキーで閉じられるようにし、閉じたらトリガーへフォーカスを戻す
- 演出はtransform/opacity中心なら全画面でも軽い
- トリガー側のアイコン演出はハンバーガーメニューにまとめています
次回の予定
ナビゲーションを収納し、パネルの開閉を明示するハンバーガーメニューを作ってみようと思います＼＼\٩( ‘ω’ )و //／／
