プルダウンメニュー#02（メインメニューのスタイルと同期）
2006.09.14
ベーシック版を元にメインメニューのスタイルをサブメニューの展開と同期させたものです。
ベーシックの動作に加えて以下のような動作をします。
- メインメニューの画像はツリーと同期してロールオーバーする
サンプル
シンプルスタイル（非同期）
背景画像を使ったスタイル（同期）
使い方
プルダウン化したい2階層のリストタグを、以下のようにオンロードイベントに登録します。
EventListener.add(window, "load", function(){ new DDNavi02('ListID') }, false);
「ListID」以下のリストが自動的に取得されイベントアクションが付加されます。リストタグの記述ルール
リストタグは以下のルールで記述します。
- リストタグで構造化している
- 親メニューのアンカークラスを「onmenu」にする
- リンクがないメニューもアンカータグで囲む
<ul id="ListID" class="cModsJS_navi">
<li>
<a href="javascript:void(0)" class="onmenu">SampleMenu 1</a>
<ul>
<li><a href="#">SampleMenu 1.1</a></li>
<li><a href="#">SampleMenu 1.2</a></li>
<li><a href="#">SampleMenu 1.3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)" class="onmenu">SampleMenu 2</a>
<ul>
<li><a href="#">SampleMenu 2.1</a></li>
<li><a href="#">SampleMenu 2.2</a></li>
<li><a href="#">SampleMenu 2.3</a></li>
</ul>
</li>
</ul>
<br style="clear:both" />
Javascriptの設定
function DDNavi02(targetID)
{
// マウスオーバーからアクションが発生するまでの時間1000→1秒
this.open_sleep = 100;
// マウスアウトからアクションが発生するまでの時間1000→1秒
this.close_sleep = 300;
// メインメニューとサブメニュー展開の同期
// メニュー展開と同時メインメニューのクラスを変える場合は1
// 展開を待たずにクラスを変える場合は0
// (背景画像がメインとサブで繋がっている場合なんかは1に)
this.menu_onmenu = 1;
}
動作はWindowsのFirefox、IE、Operaしか確認してません。他の環境の動作報告求む。
ちなみに、MacIE、IE5以下、NN4.xはサポート対象外です。
