Java Script用のライブラリであるjQuery。今となってはMicrosoftの統合開発環境であるVisual Studioや、IBM・Dellなどの多くのIT関連企業が採用しており、業界でも幅広く認められるスタンダードなものと言ってもいいでしょう。

このjQueryには公式サイトからリリースされている以外に、世界中の開発者が独自にプラグインをリリースしており、より効率的な開発や機能を実現することができます。

本記事では、jQueryを使って開発を行う際に便利なプラグインを厳選してご紹介します。

このニュースを読んだあなたにオススメ

Webデザインスキルを独学で身につけたい時に踏むべき4つのステップとは？
ゼロから自力でHTMLを学びたい方にオススメ！オンラインで学習できるWebサービス10選

メニュー関連、便利なjQueryプラグイン10選

1.PrMenu

https://github.com/pagerange/prmenu

シンプルなトップメニューを簡単に作成できるプラグインです。これを使うことで、Webサイトのページ上部に表示されるメニューを手軽に作ることができます。

また、レスポンシブ・プルダウンに対応しておりCSSもシンプルな書き方でオススメ。

デモ：http://prmenu.pagerange.com/

2.PageScroll jQuery Menu

https://github.com/peachananr/onepage-scroll

このプラグインを使えば上下左右の好きな場所にスクロールに合わせて移動するメニューが配置できます。

また、このスクロールの挙動は設定で変更も可能。設定から、カラー、スタイルまで目的に応じて自由に決められるため使い方が幅広いプラグインだと言えます。

デモ：http://www.thepetedesign.com/demos/onepage_scroll_demo.html

3.chromeContext

https://github.com/travishorn/jquery-chromeContext

ブラウザ上で右クリックすると表示されるコンテキストメニューを設置できるプラグイン。メニュー上の項目も指定できるので、ユーザーの利便性向上につながる便利なプラグインです。

デモ：http://jsfiddle.net/bupfy/1/

4.Liquid Slider

http://liquidslider.com/
※デモもこちらで確認できます

スライドするようなアニメーション効果付きのタブが実装できるプラグイン。タブにリンクしているサイトコンテンツをスライド・アニメーションで表示します。

よくあるAndroidやiPhoneアプリで使われる表現がサイト上で可能になります。

5.bigSlide

https://github.com/ascott1/bigSlide.js

このプラグインを活用すると、クリックで開閉するナビゲーションパネルを実装できます。クリックするとサイドからスッと伸びてくるようなナビゲーションタブです。

オプションで開閉の速度やタブの幅などを決めることも可能。

6.SlickNav

http://slicknav.com/
※デモもこちらで確認できます

レスポンシブ対応のメニューを手軽に作成できるプラグインで、開くとプルダウン方式でメニューが表示されます。

一般的なスマートフォン用のWebサイト制作では、スマートフォン用にコードを書く必要がありますが、このプラグインを使えば既存のコードをそのままレスポンシブメニューに対応可能。

7.Drawer

https://github.com/blivesta/drawer/

FacebookやGoogleのモバイルサイトのような、横からスッと出てくるメニューである“ドロワーメニュー”を設置できるプラグインです。ドロワーメニューは、スマートフォンやタブレットなどでも視認性が高く、操作性が良いという利点があります。

このプラグインによって、ドロワーメニューを簡単に作れるのでマルチデバイスで対応のWebサイト制作にオススメです。

デモ：http://git.blivesta.com/drawer/

8.Naver

https://github.com/FormstoneClassic/Naver

ウィンドウサイズを変更すると自動的に横長で表示されていたメニューが折りたたまれるレスポンシブメニューを設置できるプラグイン。

コンパクトにコンテンツを収めたいスマホサイトには最適。

デモ：https://formstone.it/components/navigation/demo/