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