如果菜单级别较少,而且需要实现的功能不多时,直接使用javascript脚本操作会相对于使用控件性能高一些。
下面假设菜单栏最多只有两层结构:
<TABLE id="table1" cellSpacing=0 cellPadding=0 width=140 align=center border=0>
<TBODY>
<TR onClick="showsubmenu('submenuboard4','subimgboard4','aimgboard4','fopen.gif','fclose.gif')">
<TD width=18><img src=images/index/close.gif alt="展开菜单" width="18" height="18" id=subimgboard4></TD>
<TD vAlign=center width=18><img src=fclose.gif alt="展开菜单" width="16" height="18" id=aimgboard4></TD>
<TD width=104 align="left" vAlign=center><a href=index.asp?boardid=127 target=window_main>一级菜单显示的内容</TD>
</TR>
<TR style="display:none" id='submenuboard4'> <!-- 二级菜单 -->
<TD background=vertline.gif></TD> <!-- 竖型虚线,类似于资源管理器 -->
<TD colSpan=2><TABLE border=0 align="left" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD><IMG src="/node.gif"></TD> <!-- 交叉虚线 -->
<TD><IMG src="images/index/doc.gif"></TD> <!-- 二级菜单显示的图片 -->
<TD align="left"><a href=index.asp?boardid=129 target=window_main>二级菜单显示的标题</a></TD>
</TR>
<TR>
<TD><IMG src="/node.gif"></TD> <!-- 交叉虚线 -->
<TD><IMG src="images/index/doc.gif"></TD> <!-- 二级菜单显示的图片 -->
<TD align="left"><a href=index.asp?boardid=129 target=window_main>二级菜单显示的标题</a></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>
javascript 脚本:
<SCRIPT language=javascript>
function showsubmenu(ss,ii,aa,openimg,closeimg)
{
var menuobjedt=document.getElementById(ss);
if (menuobjedt)
{
if (menuobjedt.style.display=="none")
{
menuobjedt.style.display="";
document.getElementById(ii).src="images/index/open.gif";
document.getElementById(ii).alt="关闭菜单";
document.getElementById(aa).src="images/index/"+openimg;
document.getElementById(aa).alt="关闭菜单";
}
else
{
menuobjedt.style.display="none";
document.getElementById(ii).src="images/index/close.gif";
document.getElementById(ii).alt="展开菜单";
document.getElementById(aa).src="images/index/"+closeimg;
document.getElementById(aa).alt="展开菜单";
}
}
}
</SCRIPT>
二、参考:
1、电子开发论坛:http://www.epcb.net/