よく見るサイドメニューのサンプル

Category
： CSS リファレンス

サイドになるメニューリスト項目ってよく見かけると思うんですが、使い回しが出来そうなサンプルをjavascriptを使わずにCSSのみでロールオーバーに対応しているように作ったのでみなさんの参考になれば！って思います。

デモページ・ダウンロード

html

<h2>サンプル<h2>
<ul class="navi">
<li><a href="#">サンプル1</a></li>
<li><a href="#">サンプル2</a></li>
<li><a href="#">サンプル3</a></li>
<li><a href="#">サンプル4</a></li>
</ui>

CSS

#contents .navi	{
	width: 180px;
}
#contents .navi li	{
	border-bottom: solid 1px #D1D1D1;
}
#contents .navi li a	{
	display: block;
	width: 160px;
	padding: 5px 5px 5px 15px;
	background: url(image/navi.jpg) no-repeat top left;
	text-decoration: underline;
	color: #333;
}
#contents .navi li a:hover	{
	background: url(image/navi_on.jpg) no-repeat top left;
	padding: 5px 5px 5px 20px;
	text-decoration: underline;
	color: #999;
}

a要素はインライン要素なのでブロック要素変えないといけないので、display: block;を使います。
ブロック要素にするとwidthで横幅を指定するのをお忘れないように注意しましょう。

後は基本的な事しかしていません。

backgroundに指定してある画像を変えたりて、その画像の横幅にあわせたwidthを指定するだけで、けっこう使い回しも出来て便利だと思います。