Javascript設計網頁中的下拉式選單

　　在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清晰，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。 　　下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常，只有菜单条显示在窗口中，并且当鼠标指针指向菜单条时，菜单条的子菜单才显示出来。当鼠标指针离开菜单时，子菜单则隐藏起来，回到只显示主菜单条的状态。 

　　根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。 

　　

 

　　菜单项一 

　　菜单项二 

　　…… 

　　

　　 

　　接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加
换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=' display:none; z-index:9;'。 注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。 

　　 

　　

---

 

　　

 

　　  

　　 子菜单项一一
 

　　  

　　 子菜单项一二
 

　　

---

 

　　  

　　 子菜单项一三
 

　　…… 

　　

 

　　 　　 

　　經過上面的步驟，下拉選單的格式已經定義好了，下面的任務就是控制這些子選單的顯示與隱藏。 

　　當滑鼠移到主選單條上時，應顯示其子選單，我們透過執行doMenu(MenuID)回應主選單的onmouseover事件來完成。過程的參數MenuID是代表子選單的區域的ID，過程執行時先設定window.event. cancelBubble = true，計算子選單顯示的位置，包括左上角和右下角座標。然後執行下列語句來顯示子選單所在區域： 

　　CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block"; 

　〴情況，一種情況是滑鼠在子選單及其主選單之間移動，這時不能隱藏子選單；另一種情況是滑鼠移出了子選單及其主選單的區域，這時需要隱藏子選單。我們透過執行hideMenu()回應主選單的onmouseout，同時執行hideMenu()回應子選單所在區域的onmouseout事件來完成。 

　　網頁中的另外兩個函數mouseout() 和mouseover() 的功能很簡單，分別用來處理滑鼠移動時選單項目的顏色變化。 

　　完整的原始碼請參閱《電子與電腦》網站www.pccomputing.com.cn。 

　　網頁瀏覽的效果如圖1所示，運作環境為IE4.0以上版本。

　　（圖註WANGYE） 圖1 

　　 

　　

 

　
　　 

　。
　　 

　　 

　　

　　

 

　　
　　 onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');"> 

　　 菜单项一 

　　  

　　  

　　
　　 onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');"

　　 onclick="window.event.returnValue=false;"> 

　　 菜单项二 

　　  

　　

 

　　

 

　　
　　 onmouseout='hideMenu();'> 

　　

---

 

　　

 

　　
　　 HREF='11.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项一一 

　　
 

　　
　　 HREF='12.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项一二 

　　
 

　　
　　 HREF='13.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项一三 

　　  

　　

 

　　 　　 

　　 

　　

---

 

　　

 

　　
　　 HREF='21.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项二一
 

　　
　　 HREF='22.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项二二
 

　　
　　 HREF='23.htm' TARGET='_top'

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 子菜单项二三
 

　　

---

 

　　
　　 onclick="parent.close()"

　　 onmouseout="mouseout();" onmouseover="mouseover()"> 

　　 退出系统 

　　

 

　　 

　　 

　　 
請關注PHP中文網（www.php.cn）！