JavaScriptでドロップダウンメニューを実装してみた

スムーズに開閉するドロップダウンメニュー

スムーズに開閉するドロップダウンメニューを作ってみた。名付けて「Waterfall Menu」。

ベースにしたのは、この Sliding JavaScript Dropdown Menu
以前、このJavaScriptを仕事で使おうとしたんだけど、メニューの下に1pxの変な余白ができたりしたので、使うのをやめてしまった。

ということで、リベンジしたよという記事。

Waterfall Menu

jsでスムーズに開閉するドロップダウンメニュー。メニューにマウスオーバすると、サブメニューが展開します。

更新履歴
  • [2011.04.29] ver0.3 マウスオーバ時、title属性がツールチップとして表示されないよう修正
  • [2008.12.15] ver0.2 FireFox2.0でドロップダウンメニューが下のレイヤーに入り込むバグを修正
  • [2008.08.21] ver0.1 リリース
使い方

HTMLのソースは以下。

<dl class="dropdown" title="two">
	<dt id="ddheader-two">Dropdown Two</dt>
	<dd id="ddcontent-two">
		<ul>
			<li><a href="#" class="underline">Navigation Item 1</a></li>
			<li><a href="#" class="underline">Navigation Item 2</a></li>
			<li><a href="#" class="underline">Navigation Item 3</a></li>
			<li><a href="#" class="underline">Navigation Item 4</a></li>
			<li><a href="#">Navigation Item 5</a></li>
		</ul>
	</dd>
</dl>

<dl class="accordion">に変更すると、下のコンテンツも連動して移動。(JavaScriptじゃなくて、CSSを変えてるだけ)。
title属性を振ってるのは、どのサブメニューが伸びるのかを指定するため。

<dl class="dropdown"> ⇒ 重なるように移動
<dl class="accordion"> ⇒ 下のコンテンツも連動して移動
<dl title="hoge"> ⇒ hogeというidが付いた<dd>が移動

実装しては見たもののHTMLのソースが全然綺麗じゃない...。
もうちょっとプレーンなソースが書けるよう努力します。


ライセンス:
クリエイティブコモンズライセンス:帰属(Attribution, by)」での公開・配布となります。


参考記事:
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
Sliding JavaScript Dropdown Menu - Web Development Blog
JavaScriptでのクロージャの使い方