リストでナビゲーションを作成

  • このエントリーをはてなブックマークに追加

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でナビゲーションを作る時の自分用メモ。