ドロップダウンメニュー | jQuery逆引き | Webサイト制作支援

ドロップダウンメニューを実装するライブラリです。
複数階層のドロップダウンが可能です。

サンプル

menu 1
menu 2
- menu 2-1
- menu 2-2
- menu 2-3
- menu 2-4
- menu 2-5
menu 3
- menu 3-1
- menu 3-2
- menu 3-3
- menu 3-4
- menu 3-5
menu 4
menu 5

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.dropdown.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

【JavaScript】

セレクターを指定し実行します。

【HTML】

【CSS】

ul#sample-dropdown-navigation {
								margin:0;
								padding:0;
								width:604px;
								list-style:none;
							}

ul#sample-dropdown-navigation li {
								margin:0;
								padding:0;
								border-right:1px solid #fff;
								position:relative;
								float:left;
								width:120px;
							}

ul#sample-dropdown-navigation li.last-child {
								border-right:none;
							}

ul#sample-dropdown-navigation li a {
								padding:10px;
								background-color:#000;
								display:block;
								color:#fff;
								text-decoration:none;
								line-height:1em;
							}

ul#sample-dropdown-navigation li a:hover,
							ul#sample-dropdown-navigation li a.open {
								background-color:#333;
							}

ul#sample-dropdown-navigation li ul {
								margin-left:0;
								padding-top:1px;
								list-style:none;
								position:absolute;
								left:0;
								z-index:999;
							}

ul#sample-dropdown-navigation li ul li {
								padding-bottom:1px;
								border-right:none;
								float:none;
							}

ul#sample-dropdown-navigation li ul li ul {
								padding-top:0;
								padding-left:1px;
								position:absolute;
								top:0;
								left:120px;
							}

オプション

以下の設定が可能です。

オプション	初期値	説明
action	hover	マウスの動作設定できる値：ホバー=hover、クリック=click
animate	slide	アニメーションの種類設定できる値：スライド=slide、アニメーションなし=direct
animateDirection	y	アニメーションの方向設定できる値：縦方向=y、横方向=x
animateDuration	100	アニメーションの動作時間設定できる値：ミリ秒
animateEasing	linear	アニメーションのイージング
actionElement	li	actionを適用する要素
targetElement	ul	開閉する要素
textElement	a	targetElementが存在する文字要素
showClass		展開時targetElementに付加するClass名
textClass		targetElementが存在するtextElementに付加するClass名
textOpenClass		targetElementが展開状態のtextElementに付加するClass名

ドロップダウンメニュー Dropdown menu

サンプル

ライブラリのダウンロードと設置

オプション