CSSだけで実装できるきれいなパンくずリストです。class="breadcrumb"を指定した親要素のdivの中にaタグを並べていくだけで、個数に応じてナンバーが自動でふられます。現在の位置は、aタグにclass="active"を指定します。基本的なCSSだけで構成されているので、古めのブラウザにも対応します。また、見た目が上品なので、パンくずリストに限らず、eコマースなどでの進捗を示すステップ画像の代わり(最下段のサンプル)としても使えそうです。

 

 


※参照元:http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigationX
戻るボタン