【jQuery】ドリルダウンナビゲーションを実装できるプラグイン jQuery Sliding Menu

ishida

2014.05.28

パズドラのランクが175になりました ishida です。昨日やっとサタン降臨をクリアしてワーイワーイなテンションです。

さて本日はドリルダウンナビゲーションを実装できるjQueryプラグインのご紹介です。

ドリルダウンナビゲーションとは

1画面の中で、リンクなどの項目を選択して大分類から小分類へと対象を絞り込んでいくナビゲーションです。
表示エリアに制限のあるスマートフォンなどのデバイスでよく見られるUIですね。

そんなドリルダウンナビゲーションを簡単に実装できるjQueryプラグインがありましたので、
簡単なデモを作ってみました。

jQuery Sliding Menu デモ

まずは、以下のデモをご覧ください。

リンクをクリックするたびに、下層のナビゲーションが表示されていきます。

HTML

<div id="menu">
<ul>
<li><a href="#">ノーマルダンジョン</a>
<ul>
<li><a href="#">火のダンジョン</a></li>
<li><a href="#">水のダンジョン</a></li>
<li><a href="#">木のダンジョン</a></li>
<li><a href="#">光のダンジョン</a></li>
<li><a href="#">闇のダンジョン</a></li>
</ul>
</li>
<li><a href="#">スペシャルダンジョン</a>
<ul>
<li><a href="#">大泥棒参上！</a>
<ul>
<li><a href="#">大義賊 超地獄級（テクニカル）</a></li>
<li><a href="#">大義賊 地獄級（テクニカル）</a></li>
</ul>
</li>
<li><a href="#">○○○○○コラボ</a></li>
<li><a href="#">火曜ダンジョン</a>
<ul>
<li><a href="#">黄金兵 超地獄級（テクニカル）</a></li>
<li><a href="#">虹の番人　超級</a></li>
<li><a href="#">緑の番人　上級</a></li>
<li><a href="#">青の番人　上級</a></li>
<li><a href="#">赤の番人　上級</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">テクニカルダンジョン</a>
<ul>
<li><a href="#">宵闇の森</a></li>
<li><a href="#">名も信仰も無き神殿</a></li>
<li><a href="#">紅蓮街道</a></li>
<li><a href="#">氷の大迷宮</a></li>
<li><a href="#">豊穣の大地</a></li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-sliding-menu.js"></script>

ドリルダウン部分は ul の入れ子になります。シンプルなHTML構成ですね。
また jQuery と jquery-sliding-menu.js を読み込みます。

CSS

#menu {
  width: 320px;
  margin: 0 auto;
}

.sliding-menu {
	overflow: hidden;
	position: relative;
}

.sliding-menu ul {
	float: left;
	margin: 0;
	padding: 0;
}

.sliding-menu li {
	list-style: none;
	margin: 0 0 1px;
	padding: 0;
}

.sliding-menu a {
	display: block;
	padding: 1em;
	background: #FCFCFC;
	color: #3366CC;
	text-decoration: none;
}

.sliding-menu a:hover {
	background: #333;
	color: #FFF;
}

.sliding-menu a.nav:before {
	content: '\3009';
	float: right;
	margin-left: 1em;
}

.sliding-menu a.back {
	background: #555;
	color: #FFF;
}

.sliding-menu a.back:before {
	content: '\3008';
	float: left;
	margin-right: 1em;
}

最低限のCSS記述はこのぐらい。意外と少ないですね。

JavaScript

$(function(){
  $('#menu').menu();
});

対象となる要素に対して.menu() を設定します。
また引数指定には、dataJSONとbackLabelがあり
dataJSON では、ドリルダウンの階層構造をJSON形式で記述してHTMLを生成することができます。
ul要素を書くより、こっちの方が楽かも。
backLabel は戻るリンクのラベル設定になります。