WEB

スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ

スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ
(編集部注*2013年10月15日に公開された記事を再編集したものです。)

こんにちは。デザイナーのはるえです。

もうほとんどの案件でPC+スマホ制作がセットになってきましたね。
LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。
ありがとうございます!!

そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。


【こちらもおすすめ】
高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた

Facebookでもおなじみのドロワーメニュー3選

今じゃ基本中の基本となっているドロワーメニュー。
Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。

jQuery slimMenu

slimMenu

軽量なところが嬉しいナビゲーションメニューです。

Drawer Sllide Menu

Drawer Slide Menu

デモ:http://www.tradeomics.com/
Github:https://github.com/brewern/mobile-menu

TOP DRAWER

Top Drawer

プラグインを使用せず、CSS3アニメーションで実装されたナビゲーションです。

スワイプ・フリックで動作可能なスライドショー7選

スマホサイトでスライドショーなどを使用する場合は、UIを考慮し、スワイプやフリックでの動きが必ず求められます。
そんなときに便利なプラグインをご紹介いたします。

PHOTO SWIPE

PhotoSwipe

ダブルタップやピンチインなどの基本的なジェスチャーがすべて対応されています。

flipsnap.js

flipsnap.js

デモ:http://pxgrid.github.io/js-flipsnap/demo.html
ダウンロード:http://pxgrid.github.io/js-flipsnap/download.html

Swipeshow

Swipeshow

ドラッグ型スライドショーが実装できます。

Swipbox.

Swipebox

デスクトップ、スマホ用jQueryの「lightbox」のプラグインです。

Sly

SLY

水平・垂直のスライドや、無限スクロールを実装できます。

TouchSwipe

TouchSwipe

スマホやタッチパッドなどのタッチデバイス用jQueryプラグイン。

TouchSlider

TouchSlider

ボタンをタッチしてスライドさせるタイプのスライドショーになります。

まとめ

ストレスのない快適なスマホサイトを制作するうえで、こういったプラグインが必要不可欠になってきますよね。特にドロワーメニューやスライドショーは使用頻度も高いと思うので、さくっと実装したいときにぜひ使ってみてください。

また、デザイナーのせいと君がjQueryで簡単に実装できるアコーディオンメニューを分かりやすく紹介してくれています。

「超簡単jQuery!“toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法」

こちらもぜひ参考に!

 

【jQueryでサイトをリッチに】

今すぐ試してみたくなる!CSS3やjQueryで実装できるリッチなエフェクト6選

アニメーションを高速化するjQueryプラグイン「Velocity.js」を使ってみた

animateとjQuery.Deferredで動きのある「トップへ戻る」ボタンを作ってみよう

入力フォームを更に便利にするjQueryプラグイン5つ

世簡単で高機能!デザイナー必見の汎用性が高いjQueryプラグイン7選

この記事を書いた人

ハルエ
ハルエ デザイナーチーム 2012年入社
デザイナーの遥江(はるえ)です。 録り溜めたバラエティ番組を観る時間が大好きです。寝付きの良さは誰にも負けません。LINE POP / バブルの女王でもあります(自称)。よろしくお願いします。

こちらもおすすめ

jQuery標準デザイン講座

jQuery標準デザイン講座

  • 著者神田 幸恵
  • 価格¥ 2,678(2015/11/13 17:45時点)
  • 出版日2015/12/16
  • 商品ランキング170,439位
  • 大型本320ページ
  • ISBN-104798136220
  • ISBN-139784798136226
  • 出版社翔泳社