jQueryプラグイン
Pocket

jQueryのドロワーメニューでオススメのプラグインをまとめました。

ドロワーメニューは自作してもさほど難しくないんですが、プラグインを知っておいてもいいと思います。プラグインによって特徴があったり、ちょっと面倒なところをやってくれてたりします。

基本的に今まで試したもので、かつ、派手な動きはないシンプルなものを選んでいます。あと、特徴があるもの。

オススメ順です。

1. Drawer

一番オススメのプラグインです。

drawer-new

Drawer

シンプルで、動きがきれいです。

作者は日本の方で、このブログでも過去に記事を書いたのがきっかけでやりとりするようになり、飲みに行ったりしましたw

【jQuery】理想的なドロワーメニューの動きを実装できるプラグイン-Drawer-の使い方

プラグイン自体のデザインは最小限で、自分でカスタマイズしていきたい人にオススメです。

2. hiraku.js

プラグイン名から察しの通り、こちらも日本の方が作ったプラグインです。

hiraku

hiraku.js

この方ともTwitterで繋がり、カンファレンスでお会いしました。若い方で、他にもプラグインを作ったりしていてすごい人でした。

特徴でも謳っているとおり、アクセシビリティ対応のドロワーメニューのようです。

【jQuery】アクセシビリティ対応のドロワーメニュー-hiraku.js-を使ってみた

3. Slidebars

Slidebarsもシンプルで使いやすかった記憶があります。若干、難がありましたが。。バージョンが変わり、サイトの見た目も大きく変わっているので、その辺りも改善されているかもしれません。

slidebars

Slidebars

一応過去に使い方を書きましたが、バージョン変わってるので、使い方変わってそうです。時間あったらまた書き直します。

【jQuery】簡単に使えるドロワーメニューSlidebars.jsの使い方と、もうちょい気持ちいい動きにしてみた

4. Snap.js

上の3つがシンプルで使いやすいものだったんですが、こちらはちょっと特徴的なプラグインです。

ボタンクリックで開閉するだけでなく、スワイプ操作でも開閉できます。

Snap.js

【jQuery】スマホアプリみたいなドロワーメニュー。フリック・ドラッグでも開閉-Snap.jsの使い方-

5. mmenu

こちらは試してみただけで、ブログに書いたりしてないんですが、割と使いやすかった記憶があります。

WordPressのプラグインとしても公開されているようで、WordPressでブログなど書いてる人には相性がよさそうです。

mmenu

6. Pure Drawer

jQueryプラグインと書いておきながら、最後はCSSだけで実装されたドロワーメニューです。

Pure Drawer

実戦で使ったことないですが、興味あれば使ってみるといいと思います。

【CSS】CSSだけで動くドロワーメニューPure Drawerの使い方

さいごに

以上、オススメのドロワーメニュープラグインでした。

他にも動きに特徴があるプラグインもありますが、個人的にはシンプルなやつで不足してるぶんは独自に追加していくのがいいかなと思います。あとは、冒頭でも書いたようにドロワーはさほど難しくないので、自作するか。

サクッとドロワー追加したいときはプラグインの力を借りていきましょう。

Pocket