LINEで送る
Pocket

今回は、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

Similar Posts:

LINEで送る
Pocket


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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です