ども。鉄王です。

かねてやってみたいと思っていた（といってもたいそうなことではないが）jQueryを使ってのパンくずリスト実装、という実験のレポートです。

今まで、パンくずリストを作るとき、わりとよく知られる方法にしたがって

<ul>
<li>第1階層のタイトル</li>
<li>&gt;</li>
<li>第2階層のタイトル</li>
<li>&gt;</li>
<li>第3階層のタイトル</li>
</ul>

みたいな感じで、セパレータまで一緒に<li>タグに入れ、CSSのdisplayプロパティで横一列に並べるということをやってました。

でも、考えてみるとこれって変。

セパレータ自体、文書の要素として特に意味を持っているものではないので、本来であれば<li>タグでマークアップするべきものではないんですよね。ここはやはり、ページタイトルだけを<li>で並べたい。

そんなふうにモヤモヤ思いながら、なんとかすっきりと解決できないか……と考えた結果が、jQueryを使っての実装でした。グダグダなソースで恐縮ですが、備忘録を兼ねて掲載しておきます。ご利用は計画的に :-)

なお、jQuery本体は1.2.6を使用。IE 6・7とFirefox 2・3、Safari 3で検証ずみです。

■HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQueryの疑似クラス指定でパンくずリストを作ってみるテスト</title>
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./config.js"></script>
</head>

<body>
<div id="footprint">
<p><strong>現在位置：</strong></p
><ol
><li><a href="#">第1階層のタイトル</a></li
><li><a href="#">第2階層のタイトル</a></li
><li>第3階層のタイトル</li
></ol>
</div>
</body>

</html>

■CSS（style.css）
@charset "UTF-8";

#footprint p {
    display: inline;
}
#footprint ol {
    display: inline;
    margin-left: 0em;
    padding-left: 0em;
}
#footprint ol li {
    display: inline;
    list-style: none;
}
.separator {
    padding: 0em 0.5em 0em 0.5em;
}

■jQueryの設定ファイル（config.js）
$(function() {
    $(’#footprint ol li:not(:last)’).append(’<span class="separator">&gt;</span>’);
});

jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/