|
在網(wǎng)頁(yè)制作時(shí)，為了更好地組織信息，使顯示的信息分類明確、層次清晰，網(wǎng)頁(yè)制作者往往費(fèi)盡心機(jī)。常用的方法有用樹型結(jié)構(gòu)顯示信息，用表格進(jìn)行網(wǎng)頁(yè)布局，用框架(frame)組織頁(yè)面等等。但對(duì)于習(xí)慣了Windows操作系統(tǒng)的用戶來說，利用菜單操作可以算是最自然的方法了。下面我們就來看一下怎樣在網(wǎng)頁(yè)中設(shè)計(jì)下拉式菜單。 下拉式菜單由若干個(gè)顯示在窗口頂部的主菜單條和各個(gè)菜單條下面的子菜單組成。每個(gè)子菜單往往還包含幾個(gè)子菜單項(xiàng)。通常，只有菜單條顯示在窗口中，并且當(dāng)鼠標(biāo)指針指向菜單條時(shí)，菜單條的子菜單才顯示出來。當(dāng)鼠標(biāo)指針離開菜單時(shí)，子菜單則隱藏起來，回到只顯示主菜單條的狀態(tài)。
根據(jù)上述下拉菜單的特點(diǎn)，我們就可以開始在網(wǎng)頁(yè)中制作下拉菜單了。我們?cè)诰W(wǎng)頁(yè)的頂部放置一個(gè)區(qū)域，用于顯示主菜單條，每一個(gè)主菜單條作為一個(gè)超鏈接橫向置于該區(qū)域中，當(dāng)然除非菜單項(xiàng)沒有子菜單，一般情況下這里的超鏈接不指向任何地址，只用它來激活子菜單。區(qū)域的格式見程序1。
<DIV ID='pad' ……>
<A ID='pad1' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu('idpad1');" onclick="window.event.returnValue=false;">菜單項(xiàng)一</A>
<A ID='pad2' onmouseout="mouseout(); hideMenu();" onmouseover="mouseover();
doMenu('idpad2');" onclick="window.event.returnValue=false;">菜單項(xiàng)二</A>
……
</DIV>
接著，我們根據(jù)主菜單條的個(gè)數(shù)定義相應(yīng)的子菜單，為每個(gè)子菜單定義一個(gè)區(qū)域，該區(qū)域中第一個(gè)元素是一條橫線，然后每個(gè)子菜單作為一個(gè)超鏈接置于該區(qū)域中，由于子菜單縱向排列，每個(gè)超鏈接后加<BR>換行。當(dāng)然這個(gè)區(qū)域現(xiàn)在還不能顯示出來，但當(dāng)它被激活時(shí)，其顯示位置應(yīng)位于其他對(duì)象之上，所以其style屬性置為STYLE=' display:none; z-index:9;'。 注意每個(gè)超鏈接的ID均應(yīng)與其主菜單的ID相同，以便于統(tǒng)一處理。格式見程序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()">
子菜單項(xiàng)一一</A><BR>
<A ID='pad1' HREF='12.htm' onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項(xiàng)一二</A><BR>
<HR STYLE='color:white' SIZE=1><!--如有必要可以用橫線對(duì)子菜單分組-->
<A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()">
子菜單項(xiàng)一三</A><BR>
……
</DIV>
</SPAN>
經(jīng)過上面的步驟，下拉菜單的格式已經(jīng)定義好了，下面的任務(wù)就是控制這些子菜單的顯示和隱藏。
當(dāng)鼠標(biāo)移動(dòng)到主菜單條上時(shí)，應(yīng)顯示其子菜單，我們通過執(zhí)行doMenu(MenuID)響應(yīng)主菜單的onmouseover事件來完成。過程的參數(shù)MenuID是代表子菜單的區(qū)域的ID，過程執(zhí)行時(shí)先設(shè)置window.event. cancelBubble = true，并計(jì)算子菜單顯示的位置，包括左上角和右下角坐標(biāo)。然后執(zhí)行下列語(yǔ)句來顯示子菜單所在區(qū)域：
CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block";
當(dāng)鼠標(biāo)移出主菜單時(shí)有兩種情況，一種情況是鼠標(biāo)在子菜單及其主菜單之間移動(dòng)，這時(shí)不能隱藏子菜單；另一種情況是鼠標(biāo)移出了子菜單及其主菜單的區(qū)域，這時(shí)需要隱藏子菜單。我們通過執(zhí)行hideMenu()響應(yīng)主菜單的onmouseout，同時(shí)執(zhí)行hideMenu()響應(yīng)子菜單所在區(qū)域的onmouseout事件來完成。
網(wǎng)頁(yè)中的另外兩個(gè)函數(shù)mouseout() 和mouseover() 的功能很簡(jiǎn)單，分別用于處理鼠標(biāo)移動(dòng)時(shí)菜單項(xiàng)的顏色變化。
完整的源代碼參見《電子與電腦》網(wǎng)站www.pccomputing.com.cn。
網(wǎng)頁(yè)瀏覽的效果如圖1所示，運(yùn)行環(huán)境為IE4.0以上版本。
（圖注WANGYE） 圖1
<HTML>
<HEAD>
<TITLE>網(wǎng)頁(yè)中的下拉菜單</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" >
var IsDroped =false;
function mouseout()
{
window.event.srcElement.style.color = 'white';//鼠標(biāo)移開時(shí)置為白色
}
function mouseover()
{
window.event.srcElement.style.color = 'red';//鼠標(biāo)進(jìn)入時(shí)置為紅色//鼠標(biāo)進(jìn)入時(shí)置為紅色
}
function doMenu(MenuID)
{
var CurMenu = document.all(MenuID);
//為避免閃爍,如果下拉菜單已經(jīng)顯示則不重畫.
if (IsDroped==true)
{
window.event.cancelBubble = true;
return false;
}
window.event.cancelBubble = true;
TempMenu = CurMenu;
//計(jì)算下拉菜單的位置
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";
//延時(shí)2毫秒后再顯示菜單,保證ToolbarMenu.offsetHeight有值,避免從主菜單移向下拉菜單時(shí)下拉菜單消失.
window.setTimeout("showMenu()", 2);
return true;
}
function showMenu()
{
y2 = y + TempMenu.offsetHeight;
TempMenu.style.clip = "rect(auto auto auto auto)";
IsDroped =true;//下拉菜單已經(jīng)顯示
}
function hideMenu()
{
//如果在下拉菜單的范圍之內(nèi)移動(dòng)則不隱藏.
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');">
菜單項(xiàng)一
</A>
<SPAN style="color:white"> </SPAN>
<A TARGET='_top' TITLE='' ID='pad2'
onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu('idpad2');"
onclick="window.event.returnValue=false;">
菜單項(xiàng)二
</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()">
子菜單項(xiàng)一一
</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()">
子菜單項(xiàng)一二
</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()">
子菜單項(xiàng)一三
</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()">
子菜單項(xiàng)二一</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()">
子菜單項(xiàng)二二</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()">
子菜單項(xiàng)二三</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()">
退出系統(tǒng)</A>
</DIV>
</SPAN>
<!--頁(yè)面的其它內(nèi)容-->
</BODY>
</HTML>
|
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
