スマートフォンサイト制作時に!使い勝手が良さそうなドロワーメニュー 8選

スマートフォンサイト制作時に!使い勝手が良さそうなドロワーメニュー 8選

今回はドロワーメニューのjQueryプラグインとかcss3でできるドロワーメニューを集めてみました。スマートフォンサイト制作時に使ってみるのを検討してみてください。

1. Pure Drawer

http://mac81.github.io/pure-drawer/index.html

http://mac81.github.io/pure-drawer/index.html

ライセンス: MIT license

CSSを使ってアニメーションしています。一番使いやすそう。メニュー開閉ボタンの位置も変更できるし、エフェクトもたくさんあるし。メニュー開閉ボタンのハンバーガー?のアニメーションもついていますし。いい感じです。

iPhoneで滑らかに動きます。おすすめ!

2. fixed navbar right · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.

http://git.blivesta.com/drawer/fixed-navbar-right/

http://git.blivesta.com/drawer/fixed-navbar-right/

ライセンス: MIT license

これも使いやすそう。ボタンの位置の変更、ドロワーの固定配置などもできるみたいですね。
iPhoneでも見てもいい感じに動きます。スッ、スッって感じですね。これもおすすめ!!

3. Slidebars

http://plugins.adchsm.me/slidebars/index.php#download

http://plugins.adchsm.me/slidebars/index.php#download

ライセンス: MIT license

ベーシックなドロワーメニューって感じがします。ドキュメントも充実しているし、実装はしやすそうです。
これも滑らかに動きます。スルスルしてる。

4. Sidr – A jQuery plugin for creating side menus

http://www.berriart.com/sidr/

http://www.berriart.com/sidr/

レスポンシブに対応したドロワーメニューです。

5. Bouncy Material Design navigation drawer in CSS

http://materialdesignblog.com/bouncy-material-design-navigation-drawer-in-css/

http://materialdesignblog.com/bouncy-material-design-navigation-drawer-in-css/

ライセンス: 記載無し

動きがすごい!!一回触ってみることをおすすめします。

6. jQuery.mmenu app examples

http://mmenu.frebsite.nl/examples.html

http://mmenu.frebsite.nl/examples.html

ライセンス: MIT license

詳しいチュートリアルがあって実装しやすそうです。動きなどもたくさん用意されているようなのでいいですね。

7. Trunk-js | A Responsive Web Solution

http://www.roblukedesign.com/trunk/trunk.html

http://www.roblukedesign.com/trunk/trunk.html

ライセンス: 記載無し

レスポンシブに対応したドロワーメニューです。PCのときはグローバルナビですが、SP、タブレットはドロワーですね。しかし、詳しいチュートリアルが無いのでデモを見ながら実装になるのがちょっとネックですね。

8. Pure CSS Drawer Menu – Jesse Couch

http://www.designcouch.com/home/why/2014/04/23/pure-css-drawer-menu/

http://www.designcouch.com/home/why/2014/04/23/pure-css-drawer-menu/

ライセンス: 記載無し

cssでアニメーションしています。が、iPhoneでサンプルを確認すると若干、カクついている気が・・・。ん〜、CSSでやっているしいいな〜と思ったんだけどな〜

おわりに

個人的にドロワーメニューに関しては、レスポンシブは自分でやるからいいかなって思っています。普通にメディアクエリでやればいいですし。

なので、ポイントになるのはiPhone、Androidで滑らかに動くこと、どのデバイスでもバグが無いことかなと。その点からいくとjQueryでアニメーションしているものよりもCSSでアニメーションしているものが良さそうですね。

こちらの記事もいかがですか?

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ