欧美二三四区,三级在线看中文字幕完整版,91豆花视频在线播放

在網(wǎng)頁(yè)制作時(shí)，為了更好地組織信息，使顯示的信息分類(lèi)明確、層次清晰，網(wǎng)頁(yè)制作者往往費(fèi)盡心機(jī)。常用的方法有用樹(shù)型結(jié)構(gòu)顯示信息，用表格進(jìn)行網(wǎng)頁(yè)布局，用框架(frame)組織頁(yè)面等等。但對(duì)于習(xí)慣了Windows操作系統(tǒng)的用戶(hù)來(lái)說(shuō)，利用菜單操作可以算是最自然的方法了。下面我們就來(lái)看一下怎樣在網(wǎng)頁(yè)中設(shè)計(jì)下拉式菜單。　　下拉式菜單由若干個(gè)顯示在窗口頂部的主菜單條和各個(gè)菜單條下面的子菜單組成。每個(gè)子菜單往往還包含幾個(gè)子菜單項(xiàng)。通常，只有菜單條顯示在窗口中，并且當(dāng)鼠標(biāo)指針指向菜單條時(shí)，菜單條的子菜單才顯示出來(lái)。當(dāng)鼠標(biāo)指針離開(kāi)菜單時(shí)，子菜單則隱藏起來(lái)，回到只顯示主菜單條的狀態(tài)。

　　根據(jù)上述下拉菜單的特點(diǎn)，我們就可以開(kāi)始在網(wǎng)頁(yè)中制作下拉菜單了。我們?cè)诰W(wǎng)頁(yè)的頂部放置一個(gè)區(qū)域，用于顯示主菜單條，每一個(gè)主菜單條作為一個(gè)超鏈接橫向置于該區(qū)域中，當(dāng)然除非菜單項(xiàng)沒(méi)有子菜單，一般情況下這里的超鏈接不指向任何地址，只用它來(lái)激活子菜單。區(qū)域的格式見(jiàn)程序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è)元素是一條橫線(xiàn)，然后每個(gè)子菜單作為一個(gè)超鏈接置于該區(qū)域中，由于子菜單縱向排列，每個(gè)超鏈接后加<BR>換行。當(dāng)然這個(gè)區(qū)域現(xiàn)在還不能顯示出來(lái)，但當(dāng)它被激活時(shí)，其顯示位置應(yīng)位于其他對(duì)象之上，所以其style屬性置為STYLE=' display:none; z-index:9;'。注意每個(gè)超鏈接的ID均應(yīng)與其主菜單的ID相同，以便于統(tǒng)一處理。格式見(jiàn)程序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>

　　 <A ID='pad1' HREF='13.htm' onmouseout="mouseout();" onmouseover="mouseover()">

　　子菜單項(xiàng)一三</A><BR>

　　……

　　 </DIV>

　　</SPAN> 　　

　　經(jīng)過(guò)上面的步驟，下拉菜單的格式已經(jīng)定義好了，下面的任務(wù)就是控制這些子菜單的顯示和隱藏。

　　當(dāng)鼠標(biāo)移動(dòng)到主菜單條上時(shí)，應(yīng)顯示其子菜單，我們通過(guò)執(zhí)行doMenu(MenuID)響應(yīng)主菜單的onmouseover事件來(lái)完成。過(guò)程的參數(shù)MenuID是代表子菜單的區(qū)域的ID，過(guò)程執(zhí)行時(shí)先設(shè)置window.event. cancelBubble = true，并計(jì)算子菜單顯示的位置，包括左上角和右下角坐標(biāo)。然后執(zhí)行下列語(yǔ)句來(lái)顯示子菜單所在區(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í)需要隱藏子菜單。我們通過(guò)執(zhí)行hideMenu()響應(yīng)主菜單的onmouseout，同時(shí)執(zhí)行hideMenu()響應(yīng)子菜單所在區(qū)域的onmouseout事件來(lái)完成。

　　網(wǎng)頁(yè)中的另外兩個(gè)函數(shù)mouseout() 和mouseover() 的功能很簡(jiǎn)單，分別用于處理鼠標(biāo)移動(dòng)時(shí)菜單項(xiàng)的顏色變化。

　　完整的源代碼參見(jiàn)《電子與電腦》網(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)移開(kāi)時(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)顯示則不重畫(huà).

　　 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>

　　

　　</BODY>

　　</HTML>

溫馨提示：喜歡本站的話(huà)，請(qǐng)收藏一下本站！

人人做人人澡人人爽欧美,国产主播一区二区,久久久精品五月天,羞羞视频在线观看免费

當(dāng)前位置:蘿卜系統(tǒng)下載站 > 技術(shù)開(kāi)發(fā)教程 > 詳細(xì)頁(yè)面

Javascript設(shè)計(jì)頁(yè)面中的下拉菜單

本類(lèi)教程下載

系統(tǒng)下載排行