1.概述

? ? 在網站中不僅可以設置導航條，而且還可以設置導航菜單。由于菜單內容比較多，同一頁面顯示比較雜亂，所以很多的設計者都采用了收縮式的菜單形式。

?

2.技術要點

? ?本實例主要是應用JavaScript控制顯示和隱藏表格的功能，實現收縮式導航菜單的功能。單擊導航超鏈接，顯示當前菜單的內容，隱藏上一個顯示的菜單，在隱藏菜單時，讓其有規律地隱藏，從而實現展開或收縮的動畫效果。

?

3.具體實現

（1）創建index.jsp頁，在頁面中添加一級導航菜單項以及二級導航菜單，關鍵代碼如下：

<tr style="CURSOR: hand"><td class="list_title" id="list1" οnmοuseοver="this.typename='list_title2';"  οnclick="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=maxgmyObj2=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='';}
}

?

轉載于:https://www.cnblogs.com/zkn11199/p/5589910.html

總結

以上是生活随笔為你收集整理的导航条——收缩式导航菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。