簡単なドリルダウンメニュー



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=○
(各ブラウザ共他のバージョンは動作チェックしていません)

----------------------------------------------
顔相では眼尾のことを魚尾、黒目のことを晴、白目のことをハク、瞳孔のことを瞳という。目頭にある肉球を怒肉と言うがこれ自体は判断で特に用いない。白目の色、目の上がり方下がり方、眼光等を見るわけだが、このうちで最も判断が難しいのが眼光である。ガラス球のような光だと性欲が強いなどというが、これは相者によって判断が異なる場合が多い。白目は厳密に言うと純白ではなくやや黄色がかった色が健康とされる。
(出典:wikipedia)

記事id:49 / 9822PV

関連記事