代碼:
<div align="left">
<DIV onmousedown="fmenu1()" style="cursor:hand;">
<img src="http://dob.tnc.edu.tw/image/menu-icon-demo.gif">Menu1</DIV>
<TABLE id=menu1 style="display:none" border=0 width="101">
<TR><TD>
<a href="http://dob.tnc.edu.tw/index.php"><img src="http://dob.tnc.edu.tw/image/menu-icon-count.gif" border="0">Sub Menu1</a><BR>
<a href="http://dob.tnc.edu.tw/index.php"><img src="http://dob.tnc.edu.tw/image/menu-icon-count.gif" border="0">Sub Menu2</a><BR>
<a href="http://dob.tnc.edu.tw/index.php"><img src="http://dob.tnc.edu.tw/image/menu-icon-count.gif" border="0">Sub Menu3</a><BR></TD></TR>
</TABLE>
<DIV onmousedown="fmenu2()" style="cursor:hand;">
<img src="http://dob.tnc.edu.tw/image/menu-icon-demo.gif">Menu2</DIV>
<TABLE id=menu2 style="display:none" border=0>
<TR><TD>
<a href="http://dob.tnc.edu.tw/index.php"><img src="http://dob.tnc.edu.tw/image/menu-icon-count.gif" border="0">Sub Menu1</a><BR>
<a href="http://dob.tnc.edu.tw/index.php"><img src="http://dob.tnc.edu.tw/image/menu-icon-count.gif" border="0">Sub Menu2</a><BR>
<a href="http://dob.tnc.edu.tw/index.php"><img src="http://dob.tnc.edu.tw/image/menu-icon-count.gif" border="0">Sub Menu3</a><BR></TD></TR>
</TABLE>
<SCRIPT language="JavaScript">
function fmenu1(){
if( menu1.style.display == "none")
menu1.style.display = "block";
else
menu1.style.display = "none";}
function fmenu2(){
if( menu2.style.display == "none")
menu2.style.display = "block";
else
menu2.style.display = "none";}
</SCRIPT>
</div>
這個程式是IE only的,如果希望同時通行於Mozilla和IE瀏覽器上的話,請使用W3C規範的標準寫法,做如下修改即可:
把JavaScript中的menu1.style.display都改成
document.getElementById("menu1").style.display
menu2.style.display都改成
document.getElementById("menu2").style.display
這裡有教學
http://dob.tnc.edu.tw/themes/old/showPa ... s=1428&t=6