1.概述

    在网站中不仅可以设置导航条，而且还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，所以很多的设计者都采用了收缩式的菜单形式。

 

2.技术要点

   本实例主要是应用JavaScript控制显示和隐藏表格的功能，实现收缩式导航菜单的功能。单击导航超链接，显示当前菜单的内容，隐藏上一个显示的菜单，在隐藏菜单时，让其有规律地隐藏，从而实现展开或收缩的动画效果。

 

3.具体实现

（1）创建index.jsp页，在页面中添加一级导航菜单项以及二级导航菜单，关键代码如下：

                          网站管理                           
     
            
      
更改初始信息
查看服务器信息
     
     
...//此处省略了其他一级菜单一级二级菜单的内容

（2）编写展开菜单项的自定义JavaScript方法show()，关键代码如下：

function show(obj,maxg,obj2){     if(obj.style.pixelHeight

（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='';            }}