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

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

Domo Page

…ここからが続き

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を指定するだけで、けっこう使い回しも出来て便利だと思います。

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

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article