導航條——收縮式導航菜單

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