酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

メガメニューや画像を使ったメニュー jQueryプラグインを厳選13個紹介

アイコン付きメニューを簡単に作成することができるjQuery Pluginを100個以上探して、その中から13個を厳選したので紹介します!

デモやCSS/jQueryの設置方法などもリンク先に書かれているので、導入も楽ちんですよ!

(08/28 10:10) Accessible Mega Menuを追加しました!


Auto Moving Submenu Using jQuery

デザインも綺麗で、動作も軽快です。実用的で使いやすそう。

Auto Moving Submenu Using jQuery

Demo

Accessible Mega Menu

メガメニューの一つですが、シンプルながらパソコン・タブレット・スマホまで画面サイズに合わせてうまく表示してくれます。よく作られてるなぁ^^

Accessible Mega Menu

Demo

Making Better Select Elements with jQuery and CSS3

プルダウン型のメニューを作成するときに使えそうなメニューです。スマートフォンには高さの問題で厳しそうですが、タブレットには活用しやすそうです。

Making Better Select Elements with jQuery and CSS3

Demo

OVERLAY EFFECT MENU WITH JQUERY

CSSやJSの知識があれば簡単に画像を載せることができそうです。誤操作を防ぐ工夫があるのがオススメポイントです。

OVERLAY EFFECT MENU WITH JQUERY

Demo

Page Scroller

こちらはメニューというよりは1ページ内のセクションの移動をサポートする仕組みです。縦に長いページを作った時にはオススメです!有料のPROと無料のLITEがあるようです。

Page Scroller

Demo

Mega Drop Down Menu

シンプルな表示で取り回しがしやすそうなメニューです。

Mega Drop Down Menu

Demo

(有料 5$) Responsive Mega Menu Complete Set

5$ですが内容がとても充実していたので紹介。11種類の配色デザインと、レスポンシブデザインに対応している点が魅力です。これだけのクオリティを考えると5$は安いッス!

Responsive Mega Menu Complete Set

Demo

EXPANDING IMAGE MENU WITH JQUERY

こちらは写真を活用しながらスマートにメニューを作っています。うまく写真を集められるときにオススメです。

EXPANDING IMAGE MENU WITH JQUERY

Demo

EXPANDING IMAGE MENU WITH JQUERY

こちらは派手なアニメーションはありませんが、レスポンシブなデザインで配置を調整してくれます!

menu-cover

Demo

How to Make a Smooth Animated Menu with jQuery

カーソルを当てるとメニューが下に伸びるタイプのメニューです。周りを邪魔せずにアクセントを加えることができるのが好印象です。

How to Make a Smooth Animated Menu with jQuery

Demo

Creating Consecutive Slide Using jQuery

アイコンをスライドして複数表示できるようにしています。イラスト次第でかなり痺れるメニューになりそうです。

Creating Consecutive Slide Using jQuery

Demo

Creating Consecutive Slide Using jQuery

クオリティが高いメニューです。アニメーションも複数パターンを選択できます。

Creating Consecutive Slide Using jQuery

Demo

Creating Android Dock Using jQuery & CSS3

下からドック風のメニューが出てくるタイプです。ページの下部にメニューを設置したいときには活用できそうです!

Creating Android Dock Using jQuery & CSS3

Demo

変更来歴

(08/28 10:10) Accessible Mega Menuを追加

おすすめの書籍