Javascriptで簡単なドリルダウンメニューを作ってみました。
動作チェック
メニュー1をクリック |
メニュー2をクリック |
メニュー3をクリック |
スクリプト部分
function exMenu([メニュー名],[画像名])
{
tMenu = document.getElementById(メニュー名).style;
if (tMenu.display = = 'none')
tMenu.display = "block";
else tMenu.display = "none";
change0([画像名]);
}
imgnum0=2;
function change0([画像名]){
if(imgnum0= =1){
document.getElementById(画像名).src="+マークのファイル名";
imgnum0=2;
}else if(imgnum0= =2){
document.getElementById(画像名).src="-マークのファイル名";
imgnum0=1;
}
}
以下をページ内へ記述
<a href="javaScript:exMenu('メニュー名','画像名')">
<img src="+マークのファイル名" border="0"
id="画像名" name="画像名" />
リンク文字列</a>
<div id="メニュー名" name="メニュー名" style="DISPLAY:
none Z-INDEX: [任意];LEFT: [任意]px;COLOR: #000000;
POSITION: relative; TOP:[任意]px">
メニュー項目
メニュー項目
メニュー項目...
</div>
解説:メニュー項目を記述した部分を「style="DISPLAY: none;"」で非表意にしておき、リンククリックのタイミングで表示「"block"」すると同時に「+」画像を「-」画像に切り替えます。
もう一度クリックするとメニューを「"none"」にすると同時に「-」画像を「+」画像に切り替えます。
対象:IE6=○ Mozilla Firefox1.5=× Opera9=○
(各ブラウザ共他のバージョンは動作チェックしていません)
----------------------------------------------