[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート
Post on:2009年2月12日
sponsors
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。
Simple scalable CSS based breadcrumbs
demo
パンくずはリスト要素で実装されており、日本語の使用も可能です。
パンくずのHTML
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea> |
パンくずの文字量は各項目の背景が右寄せのアロー画像になっているため、増えても破綻しないようになっています。
※量には限界がありますが。
ページ下部では、そのアロー画像のPSDもダウンロードできます。
sponsors
