jQueryで作るanimateを使ったドロップダウンメニュー

Javascript

2010.01.05

グローバルメニューでよく使われるドロップダウンメニューですが、
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を使ったドロップダウンメニュー
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

管理人さま

お世話になります。こちらのドロップダウンメニュー、動きがなめらかで、とても気に入り早速設定してみました。単体ではどうにか、完成したのですが、IEの場合、サブメニューの表示と同時に、その下の要素を押し下げてしまいます。何か回避さくはあるでしょうか? お手数をとらせて申し訳ないですが、もし回避策があり、お時間が許すようでしたら、教えていただけると有り難いです。
なお、chromeやfirefoxでは正常に動作します。

よろしくお願いします。

コメントありがとうございます。
また、お騒がせしてすいません。IE6、7で不具合が出ておりました。
変更箇所はサイトの「更新履歴」に追記しました。
お試しお願いします。

管理人さま

不具合の修正、ありがとうございました。正常に動作するようになりました。あまりに早い対応に驚きつつ、感謝の気持ちでいっぱいです。また、ご相談させていただくかもしれません。よろしくお願いします。

忘備録:jQueryを使ったプルダウンメニュー。

プルダウンメニューのつくりかたは、WEB上にたくさん紹介されている。最近は、jQueryのものが多い。ただし、あまりに数が多すぎて、どれがいいのかわからない。今回、ボタンを画像でつ…

COMMENT PLEASE!!

トラックバック

「jQueryで作るanimateを使ったドロップダウンメニュー」のトラックバックURL
http://web-park.org/javascript/dropdown091229.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook