スマホに最適なスワイプメニューを実装できる「Snap.js」の使い方

      2015/11/17

スマホに最適なスワイプメニューを実装できる「Snap.js」の使い方

ご無沙汰しております。
Webデザイナーの菅です。
かれこれ去年の5月から更新してなかったし。。
どうもブログ書くのとか不向きな性格なようです。

Facebookのように横から展開するメニューを実装できるjQueryプラグイン「sidr」の使い方

以前、上記の記事でスマホ向けの開くメニューをご紹介しましたが、
そちらと似たような、スワイプ可能なメニューを実装できるjsを見つけましたのでオススメさせていただきます。

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

サンプルデモ・ダウンロードはこちら

非常にスムーズにスライドしますよね!
ドラッグやスマホのスワイプでも開くことができる上に、
ボタン以外のエリアをクリックしても元にもどるので便利です。

最大のメリットは、jQuery等のライブラリが無くても設置できる点ですね。
CSS3をベースにしているので、動きが滑らかなのも良いです。

IE9以前のブラウザは機能が制限されますが、
最近のモダンブラウザなら問題はなさそうです。

オプションも用意されているので、カスタマイズ性も高そう。
おすすめなので、サンプルをご参考に使ってみてください。

HTML

CSS

 

オプション例

 

サンプルデモ・ダウンロードはこちら

配布サイト

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