
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
}
コメント