ENTEREAL

まえおき

WEB製作を担当させて頂いたあるお客様からのご要望だったのですが、なかなかタイトルだけでは、内容の想像が難しいため、まずは画像をご覧ください。

「画面上部から下にスライドダウンするメニュー (図1から図2へのような)」を、モバイルアプリで人気の「左からのスライドインするメニュー (図3から図4へのような)」にしたいのです。

ちなみに、本サイトも同様になっております。おそらくそれをご覧になってご相談下さったのではないでしょうか？

まずは

まずは、フリーで提供されているjQueryのプラグインを探します。

今回は、Alberto Verela氏の「Sidr」を使用しましたが、同様のプラグインは複数存在します。

• Snap.js
• PageSlide
• jPanelMenu

Sidrの基本的な使い方

本家サイトから「sidr-package-1.1.1.zip」をダウンロードし、アーカイブを展開します。

下記のCSS(どちらか一方)とJavaScript(プラグイン本体)を対象のページ(html)ファイルに読み込む。

<!-- CSS -->                                               <!-- ページ上部(header内)で読み込む -->
<link rel="stylesheet" type="text/css" href="../jquery.sidr.dark.css">        <!-- 黒ベースのスタイル -->
または
<link rel="stylesheet" type="text/css" href="../jquery.sidr.light.css">       <!-- 白ベースのスタイル -->

～中略～

<!-- jQuery & plugin--> // ページ下部(bodyの最後)で読み込む方が良い
<script type="text/javascript" charset="UTF-8" src="jquery.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.sidr.min.js"></script>

表示したいメニューリストをページ(html)ファイルに記載する。

<!-- HTML -->		  // body内のどこでもOK
<div id="sidr">
<h3>スライドインメニュー</h3>
<ul>
<li><a href="#link1">Menu 1</a></li>
<li><a href="#link2">Menu 2</a></li>
<li><a href="#link3">Menu 3</a></li>
<li><a href="#link4">Menu 4</a></li>
<li><a href="#link5">Menu 5</a></li>
</ul>
</div>

これで準備は終了。

あとは、メニューをスライドさせるトリガーを設定するだけです。どんな方法で関数「$.sidr();」を呼び出しても問題ありません。

※ 先頭にオブジェクトを設定すると、そのオブジェクトを押すたびに開閉を繰り返す(トグルする)トリガーを設定できます。

// リンクがクリックされる度にonClickが実行される
<a id="simple-menu-button" onClick="$.sidr();">Toogle menu</a>
または、
<a id="simple-menu-button">Toogle menu</a>

<script>
$(document).ready(function() {
$('#simple-menu-button').sidr();					// リンクにトリガーがバインドされる

// ※1: idを変更した場合
$('#simple-menu-button').sidr({
source: '#new-id-name'							 // id名を指定。クラス指定も可能。
});
});
</script>

ここまでのサンプル オンラインデモ

続き：「Bootstrapへの最適化」へ