今回は［Snap.js］を使って左右にスライドするタイプのメニューを作成する方法を紹介します。

まずはサンプルをご覧ください。

Snap.js : オンズのサンプル

これ、正式名称が不明確なんですが、巷では「スワイプ・メニュー」や「ドロワー・メニュー」と呼ばれていますね。

指定した特定の要素をスワイプまたはクリックすると、メインのコンテンツ部分が左右にスライドしてメニューが表示されます。
特にiPhoneをはじめとするスマートフォンタイプの小さなデバイスでは、表示領域を節約したうえでメニューもわかりやすく表示されるので、非常にユーザビリティが高くなります。

モバイル版のFacebookでも採用されているので動作についてはもうお馴染みでしょう。

以下、導入方法を具体的に紹介していきます。

［Snap.js］をダウンロードする

まず最初に、必要なファイル一式をダウンロードします。

ダウンロードは下記GitHubより。「Download ZIP」というボタンをクリックしましょう。

GitHub : https://github.com/jakiestfu/Snap.js

これで「Snap.js-develop.zip」という圧縮ファイルがダウンロードされます。
解凍するといくつかのフォルダとファイルに展開されますが、今回ここで使うのは「snap.js」と「snap.css」の２つ。

これらをサーバーにアップロードして、HTMLの適当な箇所で読み込んでおきます。

<link rel="stylesheet" href="snap.css">
<script src="snap.js"></script>

メニュー部分とコンテンツ部分を作る

スライドさせて表示されるメニュー部分とメインのコンテンツ部分を作り込んでいきます。

ここではメニュー部分を「.snap-drawers」で、コンテンツ部分を「.snap-content」で囲みます。
また JavaScript で要素を操作するためにID属性で「#content」と「#snap」もそれぞれ付与しておきましょう。

<div class="snap-content" id="content">
<div id="open">メニューを開く</div>
...コンテンツを記述
</div>

<div class="snap-drawers" id="snap">
...メニューを記述
</div>

コンテンツ部分には［Snap.js］を起動させてメニューを表示するためのボタンも用意しておきます。この要素には「#open」を指定しておきます。

［Snap.js］を起動させる初期設定

最後に［Snap.js］を動かすためのコードを記述します。これはHTMLの最後、閉じる「</body>」タグの直前に書くようにします。

<script>
// 基本設定
var snapper = new Snap({
	element: document.getElementById('content'),
	dragger: document.getElementById('open')
});

// フリック・スワイプ・ドラッグ入力の他、指定した要素のクリックでもメニューを開閉するための設定
var addEvent = function addEvent(element, eventName, func) {
	if (element.addEventListener) {
		return element.addEventListener(eventName, func, false);
	} else if (element.attachEvent) {
		return element.attachEvent("on" + eventName, func);
	}
};

// 指定した要素をクリックするとメニューが開く
addEvent(document.getElementById('open'), 'click', function(){
	 snapper.open('right');
});
</script>

ここでは「#open」要素でコンテンツ部分がスライドするようになり、また同要素をクリックしてもメニューが開く設定にしてみました。

オプション設定

挙動を細かく制御するための設定項目と、その初期値は以下のようになっています。

<script>
var snapper = new Snap({
	element: null,
	dragger: null,
	disable: 'none',
	addBodyClasses: true,
	hyperextensible: true,
	resistance: 0.5,
	flickThreshold: 50,
	transitionSpeed: 0.3,
	easing: 'ease',
	maxPosition: 266,
	minPosition: -266,
	tapToClose: true,
	touchToDrag: true,
	slideIntent: 40,
	minDragDistance: 5
});
</script>

各項目の詳細

以下、各オプションの詳細です。

element 左右にスライドするコンテンツ部分のID。通常は document.getElementById('content') のように指定。
dragger 左右にスライドさせるために使用される要素。通常は document.getElementById('dragger') のように指定。
disable 右左どちらか、動かさないほうを "left" または "right" で指定できる。
addBodyClasses メニューが開いている状態のときに body タグにクラス名が付与される。
hyperextensible "false" を指定すると「maxPosition」と「minPosition」で指定した値を超えてスライドしない。
resistance 「maxPosition」と「minPosition」で指定した値を超えてスライドしたときに動作を遅らせる係数。
flickThreshold 指定したピクセル単位分のフリック入力で［Snap.js］が起動。
transitionSpeed 開閉時のスピードを調節。
easing CSS3メソッドによるイージングを指定可能。
maxPosition スライドする最大値
minPosition スライドする最小値
tapToClose メニューが開いているとき、他の要素をクリックするとメニューが閉じる。
touchToDrag ドラッグ操作を有効化
slideIntent スライドを有効化する角度
minDragDistance ドラッグする必要がある距離の最小値。

最低限、必要とされるオプションが揃っており、比較的簡単に扱えます。またjQuery不要で単体で動くのも嬉しいポイントですね。
公式サイトとダウンロード用のURLは以下より。
GitHubではオプション設定についての詳細な説明も掲載されています。
ぜひお試しください。