菜單|設計|網頁|下拉 在網頁製作時，為了更好地組織資訊，使顯示的資訊分類明確、層次清晰，網頁製作者往往費盡心機。常用的方法有用樹型結構顯示資訊，用表格進行網頁布局，用架構(frame)組織頁面等等。但對於習慣了Windows作業系統的使用者來說，利用菜單操作可以算是最自然的方法了。下面我們就來看一下怎樣在網頁中設計下拉式菜單。 下拉式菜單由若干個顯示在視窗頂部的主菜單條和各個菜單條下面的子功能表組成。每個子功能表往往還包含幾個子功能表項。通常，只有菜單條顯示在視窗中，並且當滑鼠指標指向菜單條時，菜單條的子功能表才顯示出來。當滑鼠指標離開菜單時，子功能表則隱藏起來，回到只顯示主菜單條的狀態。
根據上述下拉式功能表的特點，我們就可以開始在網頁中製作下拉式功能表了。我們在網頁的頂部放置一個地區，用於顯示主菜單條，每一個主菜單條作為一個超連結橫向置於該地區中，當然除非功能表項目沒有子功能表，一般情況下這裡的超連結不指向任何地址，只用它來啟用子功能表。地區的格式見程式1。
<DIV ID='pad' ……>
<A ID='pad1' >功能表項目一</A>
<A ID='pad2' >功能表項目二</A>
……
</DIV>
接著，我們根據主菜單條的個數定義相應的子功能表，為每個子功能表定義一個地區，該地區中第一個元素是一條橫線，然後每個子功能表作為一個超連結置於該地區中，由於子功能表縱向排列，每個超連結後加<BR>換行。當然這個地區現在還不能顯示出來，但當它被啟用時，其顯示位置應位於其他對象之上，所以其style屬性置為STYLE=' display:none; z-index:9;'。 注意每個超連結的ID均應與其主菜單的ID相同，以便於統一處理。格式見程式2。
<SPAN ID='idpad1' STYLE='display:none; z-index:9;' >
子功能表項一三</A><BR>
……
</DIV>
</SPAN>
經過上面的步驟，下拉式功能表的格式已經定義好了，下面的任務就是控制這些子功能表的顯示和隱藏。
當滑鼠移動到主菜單條上時，應顯示其子功能表，我們通過執行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
<HTML>
<HEAD>
<TITLE>網頁中的下拉式功能表</TITLE>
</HEAD>
<SCRIPT LANGUAGE="javascript" >
var IsDroped =false;
function mouseout()
{
window.event.srcElement.style.color = 'white';//滑鼠移開時置為白色
}
function mouseover()
{
window.event.srcElement.style.color = 'red';//滑鼠進入時置為紅色//滑鼠進入時置為紅色
}
function doMenu(MenuID)
{
var CurMenu = document.all(MenuID);
//為避免閃爍,如果下拉式功能表已經顯示則不重畫.
if (IsDroped==true)
{
window.event.cancelBubble = true;
return false;
}
window.event.cancelBubble = true;
TempMenu = CurMenu;
//計算下拉式功能表的位置
x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;
x2 = x + window.event.srcElement.offsetWidth;
y = pad.offsetHeight;
CurMenu.style.top = y;
CurMenu.style.left = x;
CurMenu.style.clip = "rect(0 0 0 0)";
CurMenu.style.display = "block";
//延時2毫秒後再顯示菜單,保證ToolbarMenu.offsetHeight有值,避免從主菜單移向下拉式功能表時下拉式功能表消失.
window.setTimeout("showMenu()", 2);
return true;
}
function showMenu()
{
y2 = y + TempMenu.offsetHeight;
TempMenu.style.clip = "rect(auto auto auto auto)";
IsDroped =true;//下拉式功能表已經顯示
}
function hideMenu()
{
//如果在下拉式功能表的範圍之內移動則不隱藏.
cY = event.clientY + document.body.scrollTop;
if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 ||
cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10)
{ window.event.cancelBubble = true; return;}
//隱藏
TempMenu.style.display = "none";
window.event.cancelBubble = true;
IsDroped =false;
}
</SCRIPT>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<DIV ID='menu' STYLE='position:absolute;background-color:white;width:100%;top:0;left:0;'>
<DIV ID='pad' STYLE='position:relative;height:20;width:100%;font:bold 11pt 宋體;background-color:#007FFF;color:white;'>
<A TARGET='_top' TITLE='' ID='pad1'
>
功能表項目一
</A>
<SPAN style="color:white"> </SPAN>
<A TARGET='_top' TITLE='' ID='pad2'
>
功能表項目二
</A>
</DIV>
</DIV>
<SPAN ID='idpad1' STYLE='display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;'
>
退出系統</A>
</DIV>
</SPAN>
<!--頁面的其它內容-->
</BODY>
</HTML>
