ナビメニュー, トピックパス
UL タグエレメントと CSS を使った、横並びのナビメニュー、トピックパス（ブレッドクラムリスト）の作成方法を解説します。
ここでいうナビメニュー( nav menu )はサイト内のページを簡易に巡られるように設けられたサイト内のページリンクのことです。
ナビバー( nav bar )、ナビゲーションメニュー（ navigation menu ）、ナビゲーションバー（ navigation bar ）と多様な呼ばれ方をしています。正式には決まっていないようです。
- ad -
横並びナビメニュー
横並びのメニューを作成する場合の多くは、ULタグエレメントを使います。
必要な点は、li タグエレメントをdisplay: inline-block;
に指定することで、UL の縦リストを横並びに整形することです。
float: left; による横並びに変換する方法もあるのですが、この方法は個々の幅が調整し難いのでここではdisplay: inline-block;を使った方法を紹介しています。
nav ul li{
display: inline;
}
上記ではリンクの下線を以下のようなスタイル設定で非表示にしてあります。
nav ul li a {
text-decoration: none;
}
- ad -
トピックパス（ブレッドクラムリスト）
「webプログラムリファレンス ＞CSS ＞ リストのスタイル」というように、現在のページがサイト内ではどの位置かをユーザに分かりやすくするためのメニューをトピックパスまたはブレッドクラムリストといいます。
&t;
を付加するために、::after と :last-child を利用します。
横並びナビメニューと同じように、li タグエレメントを「display: inline;」に指定することで、UL の縦リストを横並びに整形します。
- ad -