How about "breadCrumb.js" ?

パンくずリストをJavascriptを使って外部化。
現在開いているページのURLを取得して、ディレクトリ名をもとにパンくずリストを生成します。
パンくずリストのタイプはリスト要素型、ブロック要素型、両方お使いいただけるように準備しております。

Download

• breadCrumb.js (2009/05/06)

Demo

ディレクトリ名をもとにしてパンくずナビを生成

• リストタグ表示 (/lab/breadCrumbJs/sample/list/)
• ブロックタグ表示 (/lab/breadCrumbJs/sample/block/)

ファイル名をもとにしてパンくずナビの末端を生成

• リストタグ表示 (lab/breadCrumbJs/sample/list.html)
• ブロックタグ表示 (lab/breadCrumbJs/sample/block.html)

表示させる名称の登録が無い場合、ディレクトリ名を表示します。

How to use

1. breadCrumb.jsを読み込んでください(head内等に記述します)。

   <script type="text/javascript" src="breadCrumb.js"></script>
   

2. 実装したい箇所に id="breadCrumb" を付加してください。
   p / div / ol / ul 要素に対応しています。

   <ol id="breadCrumb">
   <li>If you turn on javascript, this area is drawn to the breadcrumb(navigation).</li>
   </ol>
   

3. breadCrumb.js内19行目〜のパンくずリストに表示する名前をガシガシ編集してください。
   （Excel等を使用して制作するとラクです）

   this.contentName = {
   	"home" : "ホーム", // この行は残してください。
   	"/lab/":"実験室",
   	"/lab/breadCrumbJs/" : "breadCrumb.js",
   	"/lab/breadCrumbJs/index.html" : "breadCrumb.js 解説ページ",
   	...
   

Index.* Match / No Match

• index.* にアクセスしてもファイル名を無視して、パンくずナビの生成はディレクトリ名をもとにしてのみ行われます。
  (/lab/breadCrumbJs/index.html)
• 変数 breadCrumbJsData.indexMatch = ture にしておくと、index.* にアクセスすれば、パンくずリストの末端が描画されます。
  (/lab/breadCrumbJs/index.html (indexMatch = true))

index.* を取得してパンくずリストを生成する場合は、breadCrumb.js内の this.indexMatch = false; を以下のように編集してください。
（デフォルトでは index.* をパンくずリスト生成の際に無視します）

this.indexMatch = true;

一部ページのみ index.* を有効にするには下記のようにスクリプトタグを記述してください。

<script type="text/javascript" src="breadCrumb.js"></script>
<script type="text/javascript">
breadCrumbJsData.indexMatch = true;
</script>

License & Support

※個人利用/商用利用問わず自己責任でご利用ください。連絡もリンクも特に要りません。
自由に持っていって、自由に改変してください。
どこかで紹介して頂けると嬉しいです。

ご感想、ご不明な点などございましたら、までお問い合わせください。