标签：
在网站中不仅可以设置导航条，而且还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，所以很多的设计者都采用了收缩式的菜单形式。
本实例主要是应用JavaScript控制显示和隐藏表格的功能，实现收缩式导航菜单的功能。单击导航超链接，显示当前菜单的内容，隐藏上一个显示的菜单，在隐藏菜单时，让其有规律地隐藏，从而实现展开或收缩的动画效果。
（1）创建index.jsp页，在页面中添加一级导航菜单项以及二级导航菜单，关键代码如下：
<tr style="CURSOR: hand">
<td class="list_title" id="list1" onmouseover="this.typename=‘list_title2‘;" onclick="change(menu1,50,list1);"
onmouseout="this.typename=‘list_title‘;" background="images/title_show.gif" height="25">
<span>网站管理</span>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div class=sec_menu id=menu1 style="DISPLAY: none; width: 158px; height: 0px">
<table cellSpacing="0" cellPadding="0" width="152" align="center" background="images/bg.gif" style="padding-left:5px">
<tr><td height="25"><a href="#" target="BoardList">更改初始信息</a></td></tr>
<tr><td height="25"><a href="#" target="BoardList">查看服务器信息</a></td></tr>
</table>
</div></td>
</tr>
...//此处省略了其他一级菜单一级二级菜单的内容
（2）编写展开菜单项的自定义JavaScript方法show()，关键代码如下：
function show(obj,maxg,obj2){ if(obj.style.pixelHeight<maxg){ obj.style.pixelHeight+=maxg/10; obj2.background="images/title_hide.gif"; //改变菜单标题的背景 if(obj.style.pixelHeight==maxg/10){ obj.style.display=‘block‘; //设置指定菜单项显示 } myObj=obj; mymaxg=maxg; myObj2=obj2; setTimeout(‘show(myObj,mymaxg,myObj2)‘,‘5‘); //每隔一段时间调用一次show函数，用于实现渐渐展开效果 } }
（3）编写收缩菜单项的自定义方法hide()，关键代码如下：
function hide(obj,maxg,obj2){ if(obj.style.pixelHeight>0){ if(obj.style.pixelHeight==maxg/5){ obj.style.display=‘none‘; //设置指定菜单项隐藏 } obj.style.pixelHeight-=maxg/5; obj2.background="images/title_show.gif"; //改变菜单标题的背景 myObj=obj; mymaxg=maxg myObj2=obj2; setTimeout(‘hide(myObj,mymaxg,myObj2)‘,‘5‘); //每隔一段时间调用一次hide函数，用于实现渐渐收缩效果 }else if(whichContinue){ whichContinue.click(); } }
（4）编写自定义方法change()，实现当单击菜单标题时，隐藏前一个展开的菜单项，显示当前菜单项。关键代码如下：
function change(obj,maxg,obj2){ if(obj.style.pixelHeight){ hide(obj,maxg,obj2); //收缩菜单项 nopen=‘‘; whichcontinue=‘‘; }else if(nopen){ //收缩已经展开的菜单项 whichContinue=obj2; nopen.click(); }else{ show(obj,maxg,obj2); //展开菜单项 nopen=obj2; whichContinue=‘‘; } }
标签：
原文地址：http://www.cnblogs.com/zkn11199/p/5589910.html
