【スマートフォン対応】iScroll.jsを使ってパンくずリストを横スクロールするサンプル

スマートフォンのパンくずリストは、スマートフォンの画面のサイズ上、複数行になってしまうと表示が見えづらくなることが多いです。

そこで、スマートフォンで表示した時に、横にフリックしてスクロールできるパンくずのサンプルをかきました。以下の画像のように表示されます。

ここではjQueryのプラグインである、iScroll.jsを利用して実装しています。

■まずiScroll.jsをダウンロード
■jsファイルの読み込み
■IScroolの初期化
■パンくず部分のHTMLの記述
■CSS

■まずiScroll.jsをダウンロード

ここのiScroll公式サイトからダウンロードをします。ダウンロードしたファイルを展開して、iscroll.jsをサーバ上に配置します。

■jsファイルの読み込み

サーバ上に配置されたiscroll.jsを読み込みます。また、同時にjqueryも読み込んでおきます。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/配置場所のパス/iscroll.js"></script>

■IScroolの初期化

以下のような記述をhtmlに記述してiscroolを初期化します。横スクロールをONにするオプションを指定しています。コツはHTMLがすべて読み込み完了したあとに呼び出されるreadyの中で初期化処理を書くことです。

また、初期化時のオプションにclick:trueを入れておかないとシングルタップでリンクに遷移しません。

<script type="text/javascript">
 $(document).ready(function(){
 var scrollObj = new IScroll('#breadCrumb',{ scrollX: true, scrollY: false, mouseWheel: true, click: true });
 var breadcrumbsWidth = $('#breadCrumb ul').width();
 var windowWidth = $(document).width();
 var distance = breadcrumbsWidth - windowWidth;
 $("#breadCrumb ul").css("-webkit-transform","translate(-" + distance + "px, 0px) scale(1) translateZ(0px)");
 });
</script>

■パンくず部分のHTMLの記述

パンくずは以下のように記述します。microdata形式で記述していますが、別にmicorodataでなくても大丈夫です。

<div id="breadCrumb">
 <ul>
 <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb" class="first">
 <a href="http://blog.supersonico.info" itemprop="url"><span itemprop="title">テストサイト</span></a>
 </li>
 <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="http://blog.supersonico.info" itemprop="url"><span itemprop="title">メニュー</span></a>
 </li>
 <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="http://blog.supersonico.info" itemprop="url"><span itemprop="title">階層</span></a>
 </li>
 <li itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="http://blog.supersonico.info" itemprop="url"><span itemprop="title">階層２</span></a>
 </li>
 <li class="last">最終</li>
 </ul>
</div>

■CSS

最後にCSSを書いて、おしまいです。以下のようなCSSで綺麗に表示されるかと思います。

/*-- BREADCHUMBS --*/
#breadCrumb{
 background: #eee;
 border-width: 1px;
 border-style: solid;
 border-color: #f5f5f5 #e5e5e5 #ccc;
 box-shadow: 0 0 2px rgba(0,0,0,.2);
 overflow: hidden;
 width: 100%;
}

#breadCrumb ul{
 display:table;
}

#breadCrumb li{
 display:table-cell;
 white-space:nowrap;
 font-size: 12px;
}

#breadCrumb a{
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);
 padding-left: 15px;
 padding-bottom: 3px;
 padding-top: 3px;
}

#breadCrumb li:first-child a{
 padding-left: 5px;
 border-radius: 5px 0 0 5px;
}

#breadCrumb a:hover{
 background: #fff;
}

#breadCrumb a::after,
#breadCrumb a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
 padding-left: 1px;
}

#breadCrumb a::after{
 z-index: 2;
 border-left-color: #ddd;
}

#breadCrumb a::before{
 border-left-color: #ccc;
 right: -1.1em;
 z-index: 1;
}

#breadCrumb a:hover::after{
 border-left-color: #fff;
}

#breadCrumb .current,
#breadCrumb .current:hover{
 font-weight: bold;
 background: none;
}

#breadCrumb .current::after,
#breadCrumb .current::before{
 content: normal;
}

#breadCrumb li:last-child {
 padding-right: 10px;
}

#breadCrumb li.last {
 padding-left: 13px;
}

#breadCrumb div {
 display: none;
}

これで、スマートフォン上で長いパンくずリストも、横にスライドして表示させることが可能になります。

参考にしてみてください。では。