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

HTMLソース

[sourcecode language=’html’]

• Adobe
  • Photoshop
  • Illustrator
    • Pentool
    • Peje
• Macromedia
  • Dreamweaber
  • Flash
    • Actionscript
    • Timeline

[/sourcecode]

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

cssソース

[sourcecode language=’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;
}
[/sourcecode]

Javascriptソース

[sourcecode language=’javascript’]
$(function(){
$(“ul#mainNav li”).hover(function(){
$(“> ul:not(:animated)” , this).animate({
height : “toggle”,
opacity : “toggle”
}, 500 );
},
function(){
$(“> ul” , this).fadeOut(“slow”);
});
});
[/sourcecode]

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

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でしております。
[sourcecode language=’javascript’]
$(“ul.subNav”).hide()
[/sourcecode]

IE6、7用のスターハックと「ul.subNav」にdisplay: none;を追加しています。
[sourcecode language=’css’]
ul#mainNav li {
*display: inline;
*zoom: 1;
}

ul.subNav{
display: none;
*position: relative;
*zoom: 1;
}
[/sourcecode]

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