|
在網頁制作時，為了更好地組織信息，使顯示的信息分類明確、層次清晰，網頁制作者往往費盡心機。常用的方法有用樹型結構顯示信息，用表格進行網頁布局，用框架(frame)組織頁面等等。但對于習慣了Windows操作系統的用戶來說，利用菜單操作可以算是最自然的方法了。下面我們就來看一下怎樣在網頁中設計下拉式菜單。 下拉式菜單由若干個顯示在窗口頂部的主菜單條和各個菜單條下面的子菜單組成。每個子菜單往往還包含幾個子菜單項。通常，只有菜單條顯示在窗口中，并且當鼠標指針指向菜單條時，菜單條的子菜單才顯示出來。當鼠標指針離開菜單時，子菜單則隱藏起來，回到只顯示主菜單條的狀態。
根據上述下拉菜單的特點，我們就可以開始在網頁中制作下拉菜單了。我們在網頁的頂部放置一個區域，用于顯示主菜單條，每一個主菜單條作為一個超鏈接橫向置于該區域中，當然除非菜單項沒有子菜單，一般情況下這里的超鏈接不指向任何地址，只用它來激活子菜單。區域的格式見程序1。
<DIV ID='pad' ……>
<A ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu('idpad1');" onclick="window.event.returnValue=false;">菜單項一</A>
<A ID='pad2' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu('idpad2');" onclick="window.event.returnValue=false;">菜單項二</A>
……
</DIV>
接著，我們根據主菜單條的個數定義相應的子菜單，為每個子菜單定義一個區域，該區域中第一個元素是一條橫線，然后每個子菜單作為一個超鏈接置于該區域中，由于子菜單縱向排列，每個超鏈接后加<BR>換行。當然這個區域現在還不能顯示出來，但當它被激活時，其顯示位置應位于其他對象之上，所以其style屬性置為STYLE=' display:none; z-index:9;'。 注意每個超鏈接的ID均應與其主菜單的ID相同，以便于統一處理。格式見程序2。
<SPAN ID='idpad1' STYLE='display:none; z-index:9;' onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV >
<A ID='pad1' HREF='11.htm' onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項一一</A><BR>
<A ID='pad1' HREF='12.htm' onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項一二</A><BR>
<HR STYLE='color:white' SIZE=1><!--如有必要可以用橫線對子菜單分組-->
<A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項一三</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以上版本。
�。▓D注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'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad1');">
菜單項一
</A>
<SPAN style="color:white"> </SPAN>
<A TARGET='_top' TITLE='' ID='pad2'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');"
onclick="window.event.returnValue=false;">
菜單項二
</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;'
onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV STYLE='position:relative;left:0;top:8;'>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
HREF='11.htm' TARGET='_top'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項一一
</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
HREF='12.htm' TARGET='_top'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項一二
</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
HREF='13.htm' TARGET='_top'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項一三
</A>
</DIV>
</SPAN>
<SPAN ID='idpad2' STYLE='display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;' onmouseout='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV STYLE='position:relative;left:0;top:8;'>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
HREF='21.htm' TARGET='_top'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項二一</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
HREF='22.htm' TARGET='_top'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項二二</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
HREF='23.htm' TARGET='_top'
onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項二三</A><BR>
<HR STYLE='color:white' SIZE=1><!--分隔行-->
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋體;color:white'
onclick="parent.close()"
onmouseout="mouseout();" onmouseover="mouseover()">
退出系統</A>
</DIV>
</SPAN>
<!--頁面的其它內容-->
</BODY>
</HTML>
|
