今回は、JQueryを使って簡単に導入できるドロップダウンメニューをいろいろとご紹介。

ブログなどでも利用できるシンプルなものをなるべくピックアップしてまとめてみました。

初心者の方には、マウスオーバー時のメニューのでかたがそれぞれ微妙に違っていたりするので、好みのエフェクトを見つけて使ってみてもいいかもしれませんね。

Simple jQuery Dropdowns

デモ | ダウンロード
シンプルで、簡単に使えそうですね。

droppy – Nested drop down menus

デモ | ダウンロード
マウスオーバーでメニューが上から下にピロっとでます。

Create a multilevel Dropdown menu with CSS and improve it via jQuery

デモ | ダウンロード
こちらのメニューもいい感じのエフェクトがかかってます。

Superfish

デモ | ダウンロード
アルファがかかったエフェクトがいい感じです。

SuckerFish Style

デモ
こちらもアルファがかかったエフェクトです。

jQuery & CSS Example – Dropdown Menu

デモ
こちらは、シンプルなドロップダウンメニュー

jQuery Simple Drop-Down Menu Plugin

デモ | ダウンロード

Drop down menu with jquery

デモ

mcDropdown jQuery Plug-in

デモ | ダウンロード
セレクトボックスも、JQueryでカスタマイズできます。

jquery.combobox.example.alternatestyle

デモ
こちらもなかなかいい感じ。

300+ Jquery, CSS, MooTools and JS navigation menus

JQueryだけでなく、MooToolsや他のJavaScriptなどでつくられたナビゲーションメニューが300種類以上もまとめられています。