导航条——收缩式导航菜单

1.概述

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

2.技术要点

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

3.具体实现

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