ナビゲーション

ページ間・ページ内の移動に使う部品

• ハンバーガーメニュー 三本線のアイコンをタップすると、隠れていたメニューが開く仕組み。
• ドロワーメニュー 画面の横から引き出しのようにスライドして出てくるメニュー。開いている間は背景が暗転する。
• グローバルナビゲーション サイト共通のヘッダーに置かれる、主要ページへのリンクを横並びにしたメニュー。
• ドロップダウンメニュー メニュー項目にマウスを重ねる・クリックすると、下に一覧が開くサブメニュー。
• メガメニュー メニューの項目にホバーまたはクリックすると、複数列のリンクをまとめた幅広いパネルが開くナビゲーション。
• パンくずリスト 「トップ > カテゴリ > 現在地」のように、今いる場所を階層で示すリンクの並び。
• ページネーション 一覧を複数ページに分け、番号や前へ・次へのリンクでページを行き来する仕組み。
• 無限スクロール 一覧の下までスクロールすると、自動的に続きの項目が読み込まれて表示される仕組み。
• 固定ヘッダー ページを下にスクロールしても、画面の上部に張り付いたまま残り続けるヘッダー。
• トップへ戻るボタン 一定量スクロールすると画面の隅に現れ、クリックするとページの最上部までスムーズに戻るボタン。
• ボトムナビゲーション 画面の下部に固定表示される、アイコンとラベルを並べたナビゲーションバー。スマホアプリでよく使われる。
• 目次 記事の見出しから自動的に作られ、クリックすると該当の見出しへ移動できるリンク一覧。
• アンカーリンク 同じページの中の特定の場所へ移動するリンク。href に「#」と id を指定して使う。
• フッター ページの一番下に置かれる、リンク集やコピーライト表示などをまとめた領域。
• サイドバー 本文の横に置く、ナビゲーションリンクなどをまとめた縦長の領域。狭い画面では本文の下に回り込む。