グローバルメニューでよく使われるドロップダウンメニューですが、
jQueryのanimateを使って動きに装飾を加えます。

HTMLソース

<ul id="mainNav">
	<li><a href="">Adobe</a>
		<ul class="subNav">
			<li><a href="#">Photoshop</a></li>
			<li><a href="#">Illustrator</a>
				<ul class="subNav">
					<li><a href="#">Pentool</a></li>
					<li><a href="#">Peje</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">Macromedia</a>
		<ul class="subNav">
			<li><a href="#">Dreamweaber</a></li>
			<li><a href="#">Flash</a>
				<ul class="subNav">
					<li><a href="#">Actionscript</a></li>
					<li><a href="#">Timeline</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

複雑なulの入れ子構造でも問題なく動きます！

cssソース

ul#mainNav li {
	position: relative;
	float: left;
	margin-right: 1px;
	padding-top: .6em;
	width: 10em;
	height: 2em;
	background: #333;
	border-bottom: solid #000 1px;
	text-align: center;
	*display: inline;
	*zoom: 1;
}

ul#mainNav li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

ul#mainNav li a:hover {
	text-decoration: underline;
}

ul.subNav{
	padding-top: 1px;
	*position: relative;
	*zoom: 1;
}

ul.subNav li ul.subNav {
	position: absolute;
	top: 0;
	left: 10em;
}

Javascriptソース

$(function(){
	$("ul#mainNav li").hover(function(){
		$("> ul:not(:animated)" , this).animate({
			height : "toggle",
			opacity : "toggle"
		}, 500 );
	},
	function(){
		$("> ul" , this).fadeOut("slow");
	});
});

ソースはかなりシンプル。
でも、問題なく動きます！

Javascriptソースの解説

2行目：.hide()

まず「subNav」クラスのul要素を非表示指定します。

4行目から7行目

ここでは3行目で記述した、liにhoverした時の動作にanimateを指定しています。
$(“> ul:not(:animated)” , this).animate({ でhoverしたli要素の子要素ulの動作の指定を開始します。
:not(:animated)で動作が連続しないようにしています。
height : “toggle”, と opacity : “toggle” で徐々に表示されるアニメーションが展開されます。
}, 500 ); の数値はアニメーションのスピードを表しています。

サンプル

シンプルなJavascriptですが、良く動きます！
簡単なのでanimateの勉強にはいいです。
サンプルはこちら

更新履歴

2010.06.11

IE6、7での不具合がありましたので、JavascriptとCSSを変更しました。
変更箇所は「ul#mainNav li」と「ul.subNav」です。
Javascriptは下記コードを削除しました。非表示設定は後述のCSSでしております。

	$("ul.subNav").hide()

IE6、7用のスターハックと「ul.subNav」にdisplay: none;を追加しています。

ul#mainNav li {
	*display: inline;
	*zoom: 1;
}

ul.subNav{
	display: none;
	*position: relative;
	*zoom: 1;
}

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryで作るanimateを使ったドロップダウンメニュー