メニューボタンをクリックしたら、左右からメニューがスライドしてでてくるドロワーメニュー。

さらに、スマホでのフリック操作（PCだとドラッグ）でも開くドロワーメニューのSnap.jsの紹介です。

かなりスマホアプリに近い動きになりますね。

デモサイト

ダウンロード

GitHubよりファイル一式をダウンロードします。

GitHub

読み込み

ダウンロードしたZipファイルを解凍し、
中にある「snap.min.js」と「snap.css」を読み込みます。

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

HTML

HTMLを以下のような構造にします。

<div class="snap-drawers">
            <div class="snap-drawer snap-drawer-right">
                    <!-- メニューの部分 -->
                    <ul>
                        <li>テスト</li>
                        <li>テスト</li>
                        <li>テスト</li>
                        <li>テスト</li>
                        <li>テスト</li>
                        <li>テスト</li>
                        <li>テスト</li>
                        <li>テスト</li>
                    </ul>
            </div>
</div>
<div id="content" class="snap-content">
<!-- ドロワーメニューを開くボタン -->
<a href="#" id="open-right">ドロワーメニュー</a>
<!-- コンテンツ部分 -->
</div>

メニューの部分にはliタグやpタグ、divタグなど自由にかけます。

コンテンツ部分にはドロワーメニューを開くボタンも置いておきましょう。

JavaScript

今回はjQueryというか、JavaScriptのようです。

とはいっても普通にjsファイルに下記追加すれば大丈夫です。

// 基本的な記述です。コンテンツ部分のID名を書いておきましょう。
var snapper = new Snap({
    element: document.getElementById('content')
});
// 以下はフリックやドラッグだけでなく、ボタンでも開いたり閉じたりできるようにする記述です。
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);
    }
};
// ボタンのID名と揃えておきましょう。
addEvent(document.getElementById('open-right'), 'click', function(){
    snapper.open('right');
});

基本的な動きはこれでできると思います。

CSS

CSSは特にないので、自分好みのデザインに編集しましょう。

ただ、コンテンツ部分の背景に色をつけないと透けて、
メニューが見えてしまうので、background-colorなどで色をつけておきましょう。

オプション

特に何もしなければ、フリックやドラッグで両サイドが開くようになります。

片方だけ開きたい時や、ボタンをクリックして開閉する時のスピードなどなど、
いろいろな設定ができます。

今回は以下のような設定をしてみました。

var snapper = new Snap({
    element: document.getElementById('content'),
    disable: 'left',
    easing: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
    transitionSpeed: 0.4
});

左メニューが開かないように、
開く時のアニメーションの指定（easeOutBackのような動きにしています）、
ボタンをそいて開閉する時のスピード調整をしています。

disableはrightやleftを指定することで右側だけ、左側だけのメニューにすることができます。

disableで片方だけのメニューにする場合、上記HTMLのidとJSのrightやleftの指定に注意してください。

今回は右側メニューにしていますが、左側の場合は以下のようになります。

HTML

<div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                    <!-- メニューの部分 -->
            </div>
</div>
<div id="content" class="snap-content">
<!-- ドロワーメニューを開くボタン -->
<a href="#" id="open-left">ドロワーメニュー</a>
<!-- コンテンツ部分 -->
</div>

JavaScript

addEvent(document.getElementById('open-left'), 'click', function(){
    snapper.open('left');
});

easingは以下から選べます。

ease / linear / cubic-bezier(0.175, 0.885, 0.320, 1.275)

他にもあるかもしれませんが、使ってみた感じではこれだけしか分かりませんでした。

transitionSpeedは数字を指定すれば、開閉のスピードを調整できます。

Snap.jsのデモサイトを見れば、他にもいろんなことができそうです。

簡単に実装できて、フリックでもメニューを表示できるドロワー。

フリックできるとスマホでも気持ちいい動きになるので、
重宝しそうです。