DesignWalker DesignWalker
Search
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

arrow1 Response

  1. 51 mos, 2 wks ago

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

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

Leave A Comment