JQueryで簡単に作るドロップダウンメニューいろいろ

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

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

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

Simple jQuery Dropdowns

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

Simple jQuery Dropdowns

droppy – Nested drop down menus

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

droppy  - Nested drop down menus

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

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

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

Superfish

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

Superfish

SuckerFish Style

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

SuckerFish Style

jQuery & CSS Example – Dropdown Menu

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

jQuery & CSS Example - Dropdown Menu

jQuery Simple Drop-Down Menu Plugin

デモ | ダウンロード

jQuery Simple Drop-Down Menu Plugin

Drop down menu with jquery

デモ

Drop down menu with jquery

mcDropdown jQuery Plug-in

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

mcDropdown jQuery Plug-in

jquery.combobox.example.alternatestyle

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

jquery.combobox.example.alternatestyle

300+ Jquery, CSS, MooTools and JS navigation menus

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

300+ Jquery, CSS, MooTools and JS navigation menus

デザインblogランキング

コメント 2 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



2 Responses to “JQueryで簡単に作るドロップダウンメニューいろいろ”

  1. iPhoner Says:

    個人的には、jqueryでまとまってるものも嫌いではないですが、
    ドロップダウンっていちいち面倒な感じが否めません。

    実際に、リテラシーの低い層はどう思っているんだろうか?

  2. 次なるもの » Blog Archive » JQueryで簡単に作るドロップダウンメニューいろいろ | DesignWalker Says:

    [...] JQueryで簡単に作るドロップダウンメニューいろいろ | DesignWalker JQueryで簡単に作るドロップダウンメニューいろいろ | DesignWalker 今回は、JQueryを使って簡単に導入できるドロップダウンメニューをいろいろ とご紹介。ブログなどでも利用できるシンプルなものをなるべくピックアップし てまとめてみました。初心者の方には、マウスオーバー時のメニューの… original article [...]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ