スケーラブルなCSSベースのパンくずリスト[CSS]

css0910041.jpg

aceinfowayindia.comより、スケーラブルなCSSベースのパンくずリストの作成方法の紹介です。

マークアップ方法は、以下のようになります。

HTML

<ul id="breadcrumbs">
 <li><a href="#">Home</a></li>
 <li><a href="#">Main Lavel</a></li>
 <li><a href="#">Sub Lavel</a></li>
 <li><a href="#">Sub sub Lavel</a></li>
 <li>Your Current page</li>
</ul>

CSSのほうは、ul要素とli要素のリセットを行い、下記の画像を用意します。

CSS

#breadcrumbs {
	height:2.7em;
	border:1px solid #c9c9c9;
}
#breadcrumbs li {
	float:left;
	line-height:2.7em;
	color:#777;
	padding-left:.85em;
}
#breadcrumbs li a {
	background: url(breadcrums.jpg) no-repeat right center;
	display:block;
	padding:0 15px 0 0;
}
#breadcrumbs li a:link, #breadcrumbs li a:visited {
	color:#777;
	text-decoration:none;
}
a:link, a:visited,#breadcrumbs li a:hover,
#breadcrumbs li a:focus {
	color:#222
}