ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Snap.jsは左右に対応したスライドメニューを表示するライブラリです。

iOSアプリでよく使われているスライド式のメニュー。意外と便利な機能なので、Webアプリでも活かしてみたいと思っている人は多いのではないでしょうか。そこで使ってみたいのがSnap.jsです。


トップ画面です。


ドラッグのところを右にドラッグすると、メニューが出ます。または右上のメニューボタンをクリックしても良いです。


左も出ます。


半分で止めることもできます。


ドラッグできない部分を指定することもできます。

Snap.jsはドラッグできる部分をスライドさせることで左右からメニューを表示させることができます。片方のメニューを無効にすることもできます。ドラッグ以外でもボタンによる呼び出しもできますので、ユーザビリティは高いライブラリと言えそうです。

Snap.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。


MOONGIFTはこう見る

スライド式メニューは最近よく見かけるようになっていますが、安直に使うことはあまりお勧めしません。特にアプリにおいてはそうです。Webの場合サイドメニューがあるUIは多いので慣れていますが、アプリの場合メニューを開く操作すら行われないケースが多々あります。

また、機能を追加した際にメニューの一項目に追加されますので、どんどんメニューが長くなって新機能が気付かれづらくなる可能性があります。メニューが押されるような工夫(バッジを付けるなど)をしないといけないでしょう。

Snap.js

jakiestfu/Snap.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2