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

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

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

グローバルナビゲーションは、サイトのどのページからでも主要コンテンツへたどり着ける「幹」の導線です。ここでのデモは、情報階層をコンパクトに畳むドロップダウンメニューと、スクロールしても操作を失わない固定（追従）ヘッダーという、実サイトで最も使用頻度の高い2系統を扱っています。

ドロップダウンは「一覧性と省スペースの両立」、固定ヘッダーは「いつでも移動できる安心感」が本質です。どちらも見た目より設計判断――何階層まで見せるか、どのタイミングで固定するか――がユーザビリティを左右します。

アニメーションのパターンが多いため、２回に分けて紹介いたします。

おさえておきたいところ

       目的：サイト全体の構成を分かりやすく伝える
使いどころ：画面の読み込み中 / クリック / マウスオーバー / スクロール / 画面のリサイズ

ドロップダウンメニュー（上）

ドロップダウンメニュー（左）

ドロップダウンメニュー（写真付 上ナビ）

ドロップダウンメニュー（写真付 左ナビ）

スクロールすると上部に固定

スクロール途中から上部固定

スクロールするとハンバーガーメニューに変化

スクロール途中からヘッダーの高さが小さくなる

スクロール途中でヘッダーが消え、上にスクロールすると復活

スクロールすると位置が固定して追従

実務メモ（2026年追記）

コードは当時のまま残しています。保守や新規実装で最初に確認すべきは「タッチ端末での挙動」です。hoverで開くドロップダウンはスマホでは成立しないため、クリック（タップ）でも開閉できる二段構えにするのが現在の定石です。開閉する項目にはaria-expandedを付け、キーボードのTab移動でも辿れるようにしておくと、アクセシビリティと検索エンジンのクロール両方に効きます。

• 固定ヘッダーを使うなら、ページ内リンクのズレ対策にscroll-margin-topを併用する
• モバイルでは固定ヘッダーの高さを最小限に（画面の1割を超えると本文が窮屈になる）
• 「スクロールで隠れて、上に戻すと出る」型は読み物系と相性が良い
• 全画面型の展開ナビは続編のグローバルナビゲーション２で扱っています

次回の予定

ハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示（正確には拡大表示）されるアニメーションを作ってみようと思います＼＼\٩( ‘ω’ )و //／／