HTML+CSSでナビゲーションを作る時の自分用メモ。
シンプルなリストナビゲーション
中央揃えのシンプルなテキストナビゲーション。テキストリンクに対して、下線を引いたりあるいはマウスホバーした時に色が変わるように工夫すると良い。
display:inline-block;を使ったレイアウト。
HTML
<nav> <ul> <li><a href="#">sample1</a></li> <li><a href="#">sample2</a></li> <li><a href="#">sample3</a></li> </ul> </nav>
CSS
nav ul{ list-style:none; margin:0; padding:0; text-align:center; } nav ul li{ display:inline-block; }
横並びのナビゲーションボタン
グローバルナビゲーションのボタンサンプル。下記は4等分したナビゲーションボタン。ご等分する時はliの幅を20%にする。
display:table;を使ったレイアウト。
HTML
<nav> <ul> <li><a href="#">sample1</a></li> <li><a href="#">sample2</a></li> <li><a href="#">sample3</a></li> <li><a href="#">sample4</a></li> </ul> </nav>
CSS
nav ul{ list-style:none; margin:0; padding:0; width:100%; display:table; } nav ul li{ width:25%; padding:0 1%; display:table-cell; vertical-align:middle; } nav ul li a{ padding:1em; display:block; text-align:center; color:#fff; background:#00f; } nav ul li a:hover{ background:#f00; }nav ul{ text-align:center; } nav ul li{ display:inline-block; }
HTML+CSSでナビゲーションを作る時の自分用メモ。