今回は[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」の2つ。
これらをサーバーにアップロードして、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ではオプション設定についての詳細な説明も掲載されています。
ぜひお試しください。