Lesson 10 アコーディオン機能があるスライド型パンくずリスト - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson10

アコーディオン機能がある スライド型パンくずリスト

制作・文

栗林宏之（ビーズスタジオ）

限られたスペースに設置でき、階層が深く文字数が多いなどの場合に役立つjQueryプラグイン「jBreadCrumb」。通常時は各階層の一部の幅を縮め隠すことによって、決まった枠内に収めることができる。

まずは jBreadCrumb を公開サイトから手に入れる【1-1】。ダウンロードしたjBreadCrumb_1.1.zip を解凍し、jsフォルダ、Styles フォルダ（BreadCrumb.cssのみ必要）、Imagesフォルダを適当な場所に設置する。head内でjs ファイルとCSSファイルを読み込む設定をする【1-2】。


【1-1】http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html


【1-2】設置した階層に合わせてパスを指定する

パンくずリストを表示したい場所に既定のコードを記述する。リストタグを囲むdiv にはhead内で指定した id と同じものを指定する。これで設置は完了だ【2-1】。


【2-1】

カスタマイズ方法も紹介しよう。パンくずの横幅は BreadCrumb.css 内37 行目で変更できる【3-1】。jquery.jBreadCrumb.1.1.js では、endElements ToLeaveOpen はパンくずの階層後ろからスライドさせず開いておく数となる。また beginingElementsToLeaveOpenは逆に前から開いておく数を指定する。閉じている部分の横幅調整はpreviewWidth で指定する（単位：ピクセル、指定不要）【3-2】【3-3】。

例えば、
endElementsToLeaveOpen: 0,
beginingElementsToLeaveOpen: 0,
previewWidth: 5
とすると、すべての階層が閉じた状態となる【3-4】。


【3-1】


【3-2】数字を変更すると基本的な作業は完了


【3-3】上段は「endElementsToLeaveOpen」、中段は「beginingElementsToLeaveOpen」をそれぞれ0、1、2と変更したところ。下段は「previewWidth」を25から40に変更している


【3-4】