プルダウンメニュー#01（ベーシック）
2006.09.14
エレメント自動取得のベーシックなプルダウンメニュー（ドロップダウンメニュー）です。
以下のような動作をします。
- マウスオーバー○秒後にイベントを実行するか設定可（単にマウスが上を通りすぎてもメニューが開かないように）
- マウスアウト○秒後にイベントを実行するか設定可（一瞬だけマウスアウトしても閉じないように）
- 展開中に画面クリックをすると即メニューを閉じます
サンプル
上のようなリストを以下のようなナビゲーションにします。
使い方
プルダウン化したい2階層のリストタグを、オンロードイベントに登録します。
EventListener.add(window, "load", function(){ new DDNavi('ListID') }, false);
オブジェクトごとにプロパティを変えたい場合は以下のように。
// このオブジェクトは待ち時間なしで即開く/閉じる EventListener.add(window, "load", function(){ var obj = new DDNavi('ListID'); obj.close_sleep = 0; obj.open_sleep = 0; }, false);
「ListID」以下のリストが自動的に取得されイベントアクションが付加されます。
リストタグの記述ルール
リストタグは以下のルールで記述します。
- リストタグで構造化している
- リンクがないメニューもアンカータグで囲む
<ul id="ListID" class="navi">
<li>
<a href="#">SampleMenu 1</a>
<ul>
<li><a href="#">SampleMenu 1.1</a></li>
<li><a href="#">SampleMenu 1.2</a></li>
</ul>
</li>
<li>
<a href="#">SampleMenu 2</a>
<ul>
<li><a href="#">SampleMenu 2.1</a></li>
<li><a href="#">SampleMenu 2.2</a></li>
</ul>
</li>
</ul>
<br style="clear:both" />
Javascriptの設定
function DDNavi(targetID)
{
// マウスオーバーからアクションが発生するまでの時間1000→1秒
this.open_sleep = 50;
// マウスアウトからアクションが発生するまでの時間1000→1秒
this.close_sleep = 300;
}
動作はWindowsのFirefox、IE、Operaしか確認してません。他の環境の動作報告求む。
ちなみに、MacIE、IE5以下、NN4.xはサポート対象外です。
