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

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

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

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

スクリプトの基本だけはおさえよう~JavaScript
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.MeanMenu

http://www.meanthemes.com/plugins/meanmenu/

先ほどのSlickNavと同じく、レスポンシブ対応のメニューを作成してくれるプラグイン。ブラウザの表示幅によってフレキシブルに通常のメニューからレスポンシブメニューへと変化する便利なプラグインを設置可能。

デモ:http://www.meanthemes.com/demo/meanmenu/demo.html

9.Naver

https://github.com/FormstoneClassic/Naver

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

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

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

まとめ

今回はメニューのカスタマイズや開発に役に立つメニュー関連プラグインについて紹介させて頂きました。

開発作業をより便利にする目的であったり、Webサイト上の機能を追加する際は今回ご紹介したようなjQueryのプラグインを取り入れることで、より魅力的なサイトを作る手段となるでしょう。

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

スクリプトの基本だけはおさえよう~JavaScript
Webデザインスキルを独学で身につけたい時に踏むべき4つのステップとは?
ゼロから自力でHTMLを学びたい方にオススメ!オンラインで学習できるWebサービス10選

このニュースに関連するカリキュラム

スクリプトの基本だけはおさえよう~JavaScript

スクリプトの基本だけはおさえよう~JavaScript

スクリプトと聞くと難しく思うかもしれません。しかし、Googleアナリティクスなど、すでにWeb担当者には避けて通れない技術となっています。もっとも基本的なJavaScriptの基本について解説します。