jQuery

jQueryプラグインを使ってパンくずリストをレスポンシブ化する

jquery-rcrumbs

今回は、レスポンシブに対応したパンくずリストを作成出来るjQueryプラグイン【jquery-rcrumbs】の使い方のご紹介です。

Webサイトなどを運営されている方は、パンくずリストなどを実装されている方がほとんどだと思います。
見ないほうが珍しいぐらいですが…
そんなパンくずリストですが、Webサイトがレスポンシブ化していると、特に階層が深いページでは、パンくずリストが変な所で改行したりとレイアウト的にちょっとということもあるかと思います。
そんな時にこちらのjQueryプラグイン【jquery-rcrumbs】を使えば、パンくずナビの数を自動的にブラウザウィンドウ内で収まるよう表示してくる大変ありがたいプラグインなんです。

また、実装も既存のパンくずのマークアップを崩さず実装出来ますので、とても便利になっていますし、ちょっとしたオプションも用意されていますので、助かります。

実際に【jquery-rcrumbs】を利用したデモサイトも用意していますので、ご参考下さい。
パンくずの確認は、ブラウザのウインドウサイズなどを変えてみてください。

デモサイト

実際に実装するのであれば、下記リンク先より必要ファイルをダウンロードして下さい。

jquery-rcrumbs

jquery-rcrumbs 使い方

それでは、jQueryプラグイン【jquery-rcrumbs】の使い方をご説明していきます。

必要ファイルの読み込み

まずは、jQuery本体とダウンロードしたファルダ内にある【jquery.rcrumbs.css】【jquery.rcrumbs.js】をhead内に読み込みます。
こちらは任意でいいのですが、アイコンフォントを利用したいので、【font-awesome.min.css】も一緒に読み込んでおきます。
font-awesomeの利用方法はこちらの記事をご参考下さい。
ファイルの階層などは、ご自身の環境に合わせて変更して下さい。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/jquery.rcrumbs.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.rcrumbs.js"></script>

HTMLの準備

次にHTMLの準備ですが、今回はリッチスニペット版と通常版を記述しておきます。
どちらを使っても問題はありません。

    <div id="breadcrumb">
    	<ul>
    	    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="" itemprop="url"><i class="fa fa-home fa-fw"></i><span itemprop="title">ホーム</span></a>&rsaquo;</li>
    	    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="" itemprop="url"><span itemprop="title">CATEGORY-A</span></a>&rsaquo;</li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="" itemprop="url"><span itemprop="title">CATEGORY-A-1</span></a>&rsaquo;</li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="" itemprop="url"><span itemprop="title">CATEGORY-A-1-1</span></a>&rsaquo;</li>
            <li>タイトルタイトルタイトルタイトルタイトルタイトル</li>
    	</ul>
    </div>
    <div id="breadcrumb">
    	<ul>
    	    <li><a href="" itemprop="url"><i class="fa fa-home fa-fw"></i>ホーム</a>&rsaquo;</li>
    	    <li><a href="" itemprop="url">CATEGORY-A</a>&rsaquo;</li>
            <li><a href="" itemprop="url">CATEGORY-A-1</a>&rsaquo;</li>
            <li><a href="" itemprop="url">CATEGORY-A-1-1</a>&rsaquo;</li>
            <li>タイトルタイトルタイトルタイトルタイトルタイトル</li>
    	</ul>
    </div>

JavaScript

上記div要素のID名を指定します。

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

上記までを記述すれば、【jquery-rcrumbs】の実装の完了となります。
パンくずの方のCSSは記述していませんが、【jquery.rcrumbs.css】を読み込むことでしっかりと横並びにはしてくれます。
また、jquery.rcrumbs.cssのスタイルが気に食わない場合は、上書きなどをしてスタイルを編成されてみてもいいかもしれません。
特に実装も難しくなく割りと簡単に実装出来ますので、レスポンシブのサイトでは、使えるjQueryプラグインですね。

デモサイト

一番左を固定して一番右だけを表示する場合

言葉で言い表すのは少しむずかしいですが、例えば、デフォルトの状態で、ウィンドウサイズを最小にするとパンくずリスト最後の2個しか表示されません。
これはこれでいいのですが、僕的には、最初のパンくず【ホーム】は常に表示させて、ウィンドウ最小時には、最後のパンくずのみを表示させたい場合は、下記のようにJavaScriptを記述します。

<script type="text/javascript">
        jQuery(document).ready(function() {
		$("#breadcrumb").rcrumbs({
				nbFixedCrumbs: 1,//固定するパンくずの数
				nbUncollapsableCrumbs: 1//サイズが変更された時にパンくずナビに最大数
				});
        });
</script>

少し言葉足らずで申し訳ないのですが、デモサイトでの3つ目のパンくずリストなります。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS colorbox1

動画もLightbox風に表示出来るColorbox 使い方

NEXT thumbnails_url

WordPressでアイキャッチ画像のURLを取得して表示する