[JS]レスポンシブ対応でパンくずの一行が長くて困ったを解決するスクリプト -rCrumbs

多階層をもったサイトでは、パンくずも長くなりがちです。
テキストベースで実装した長い一行のパンくずを表示幅に合わせて最適化するjQueryのプラグインを紹介します。

jQuery rCrumbs -GitHub

• rCrumbsのデモ
• rCrumbsの使い方

rCrumbsのデモ

一行で長いパンくずは表示幅を変更すると、最適化されて表示されます。
主要なモダンブラウザをはじめ、IE8+でご覧ください。

デモページ：幅1200pxで表示

上から、アニメーション有り、アニメーション無し、幅に関係なく固定、の3種類です。

幅を3サイズ変更して、比較したものです。

デモページ：幅1200, 780, 480pxで表示

幅1200pxで表示

先頭のHomeから、長いページタイトルまで全部が表示

幅780pxで表示

先頭のHome側からはみ出るアイテムを省略

幅480pxで表示

長いページタイトルもはみ出る場合は省略

※省力無しの固定表示することもできます。

rCrumbsの使い方

実装は簡単で、パンくずはリスト要素で実装されています。

Step 1: 外部ファイル

当スタイルシートと「jquery.js」と当スクリプトををhead内に記述します。

<link rel="stylesheet" type="text/css" href="jquery.rcrumbs.css">
<script src="jquery.js"></script>
<script src="jquery.rcrumbs.js"></script>

Step 2: HTML

<div class="rcrumbs" id="breadcrumbs">
    <ul>
        <li><a href="#">Home</a><span class="divider">></span></li>
        <li><a href="#">...</a><span class="divider">></span></li>
        <li><a href="#">...</a><span class="divider">></span></li>
    </ul>
</div>

Step 3: JavaScript

<script type="text/javascript">
    jQuery(document).ready(function() {
        $("#breadcrumbs").rcrumbs();
    });
</script>

スクリプトのオプションでは、アニメーションのスピードや有無、リサイズ時に実行するかどうか、などを設定できます。