動きのあるドロップダウンメニューの作り方

jQueryで6行程度で、コピペでも実装できます。

デモはこちら

コードは以下のようになります。

HTMLについての解説

ナビゲーションの中にサブナビゲーションが入っているのでulタグを入れ子にしています。それ以外、特段変なHTMLにはしていません。第1階層のリストにspanが入っているのはデザイン上のものなので必須ではありません。

CSSについての解説

装飾的な内容の解説は省いて、構造について説明します。また、リセットCSSは各自適当に当てて下さい。

第1階層のliタグにはfloat : leftを掛けて、横幅を200px、高さを60pxで決めてます。この横幅などに関しては中に入るテキストなどで変わって来るでしょう。また、position : relativeを第2階層をabsoluteにするために指定しています。

第2階層はposition : absolute を指定していますが、これは第2階層が親よりも横幅が長くなった時に位置をずらしたり、第1階層との位置関係を調整するのに何かと便利なので入れています。なので、なくても問題はありません。当然のことながら、最初から見えていてはいけないので、display : noneで非表示にしています。

jQueryについての解説

1.フェードバージョン

$(function() {
 ...
});

は言わずもがなドキュメントの読み込みが終わったら実行してね、というjQueryの基本的な関数です。

$('.fade > li').hover(...);

でfadeクラスの子要素のliタグ（ここの場合は第1階層のliタグ）にホバーしたら…の内容を実行してね、というイベントです。今回はhover()は第1引数と第2引数に関数を渡しています。第1引数はマウスがホバーした時、第2引数はマウスが離れた時の処理になります。hoverメソッドは引数1つでホバー時・離れた時の挙動を記述することもできますが、それぞれの挙動を少し分けるために今回は2つ引数を渡しています。

第１引数

function() {
 $(this).find('.secondary_nav').stop(true).fadeIn(500);
}

thisはホバーした要素、つまり第1階層のliを表し、findメソッドで子要素でsecondary_navというクラスの要素を見つけます。さらにstopメソッドでアニメーションを止め、fadeInメソッドで500ミリ秒でふわっと表示されるようにしています。なぜstopメソッドを使うのかは後述します。

第2引数

function(){
  $(this).find('.secondary_nav').fadeOut(500);
});

第2引数も第1引数と同じような感じですが、stopメソッドがないのと、fadeInがfadeOutになっています。動作としても第1引数との逆でマウスが離れると500ミリ秒でフェードアウトします。

.stop(true)

第1引数にいれたstopメソッドですが、これがないと、連続でホバーした際に、アニメーションがホバーした回数だけ繰り返されてしまいます。それを止めるためにstopメソッドを挿入しています。

stopメソッドには2つの引数（真偽値）を渡せますが、ストップする挙動に違いがあります。stop(true,true)でも問題ありませんが、その挙動に関しては好みの問題かなと思います。（スライドのような単純な動きではなく、複雑なアニメーションをする時は使い分ける必要があるかと思います）。

stopメソッドの挙動の違いについては以下のページに詳しく書かれています。

jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目）

2.スライドバージョン

スライドバージョンもフェードバージョンとほとんど同じで、fadeIn, fadeOutをそれぞれslideDown, slideUpに書き換えるだけです。

jQueryでやる利点

ドロップダウンメニューはCSSのみで作るやり方もありますが、jQueryでやる利点は約6行追加するだけで良いこと、表現を変えたくなったらすぐ変えられる点です。もし、フェードからスライドに変えたくなってもfadeInをslideDownに変えればすぐ反映できます。また、動きをCSSから分離できるので、デザイン上のCSSとあまり干渉しない点もあります。

jQueryでやると簡単に表現できることもあるので、試してはいかがでしょうか？