Qitailang's HP > webtech

最も簡潔なパンくずリスト

2014/08/06

このページの先頭行のような「パン屑リスト」は、寓話『ヘンゼルとグレーテル』で主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する名前だそうだが、確かに、サイトの中で今どのページを閲覧しているのかが直感的にわかる優れたナビゲーションだ。

最近目からウロコの超簡潔なCSS記述方法を知った。隣接する要素に適用するCSSの書き方(要素 + 要素)というものがあるらしく、基礎からやってない私には思いつくはずもない。

sample

<ol id="topicpath">
  <li><a href="#">Top Level</a></li>
  <li><a href="#">Second Level</a></li>
  <li><a href="#">Third Level</a></li>
  <li>Current Item</li>
</ol>
ol#topicpath {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ol#topicpath li {
  display: inline;
}
ol#topicpath li + li:before {
  content: " > ";
}

参照サイト
http://www.degico.net/201304_breadcrumb/
http://weboook.blog22.fc2.com/blog-entry-268.html

その他の方法