熱點推薦：
您现在的位置： 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Javascript設計網頁中的下拉菜單

2022-06-13   來源: JSP教程 
在網頁制作時為了更好地組織信息使顯示的信息分類明確層次清晰網頁制作者往往費盡心機常用的方法有用樹型結構顯示信息用表格進行網頁布局用框架(frame)組織頁面等等但對於習慣了Windows操作系統的用戶來說利用菜單操作可以算是最自然的方法了下面我們就來看一下怎樣在網頁中設計下拉式菜單 　　下拉式菜單由若干個顯示在窗口頂部的主菜單條和各個菜單條下面的子菜單組成每個子菜單往往還包含幾個子菜單項通常只有菜單條顯示在窗口中並且當鼠標指針指向菜單條時菜單條的子菜單才顯示出來當鼠標指針離開菜單時子菜單則隱藏起來回到只顯示主菜單條的狀態

　　根據上述下拉菜單的特點我們就可以開始在網頁中制作下拉菜單了我們在網頁的頂部放置一個區域用於顯示主菜單條每一個主菜單條作為一個超鏈接橫向置於該區域中當然除非菜單項沒有子菜單一般情況下這裡的超鏈接不指向任何地址只用它來激活子菜單區域的格式見程序

　　<DIV ID=pad ……>

　　<A ID=pad onmouseout=mouseout(); hideMenu(); onmouseover=mouseover();

　　doMenu(idpad); onclick=windoweventreturnValue=false;>菜單項一</A>

　　<A ID=pad onmouseout=mouseout(); hideMenu(); onmouseover=mouseover();

　　doMenu(idpad); onclick=windoweventreturnValue=false;>菜單項二</A>

　　……

　　</DIV> 　　

　　接著我們根據主菜單條的個數定義相應的子菜單為每個子菜單定義一個區域該區域中第一個元素是一條橫線然後每個子菜單作為一個超鏈接置於該區域中由於子菜單縱向排列每個超鏈接後加<BR>換行當然這個區域現在還不能顯示出來但當它被激活時其顯示位置應位於其他對象之上所以其style屬性置為STYLE= display:none; zindex:; 注意每個超鏈接的ID均應與其主菜單的ID相同以便於統一處理格式見程序

　　<SPAN ID=idpad STYLE=display:none; zindex:; onmouseout=hideMenu();>

　　 <HR STYLE=position:absolute;left:;top:;color:white SIZE=>

　　 <DIV >

　　 <A ID=pad HREF= onmouseout=mouseout(); onmouseover=mouseover()>

　　 子菜單項一一</A><BR>

　　 <A ID=pad HREF= onmouseout=mouseout(); onmouseover=mouseover()>

　　 子菜單項一二</A><BR>

　　 <HR STYLE=color:white SIZE=><!如有必要可以用橫線對子菜單分組>

　　 <A ID=pad HREF= onmouseout=mouseout(); onmouseover=mouseover()>

　　 子菜單項一三</A><BR>

　　……

　　 </DIV>

　　</SPAN> 　　

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

　　當鼠標移動到主菜單條上時應顯示其子菜單我們通過執行doMenu(MenuID)響應主菜單的onmouseover事件來完成過程的參數MenuID是代表子菜單的區域的ID過程執行時先設置windowevent cancelBubble = true並計算子菜單顯示的位置包括左上角和右下角坐標然後執行下列語句來顯示子菜單所在區域

　　CurMenustyleclip = rect( ) ;CurMenustyledisplay = block;

　　當鼠標移出主菜單時有兩種情況一種情況是鼠標在子菜單及其主菜單之間移動這時不能隱藏子菜單另一種情況是鼠標移出了子菜單及其主菜單的區域這時需要隱藏子菜單我們通過執行hideMenu()響應主菜單的onmouseout同時執行hideMenu()響應子菜單所在區域的onmouseout事件來完成

　　網頁中的另外兩個函數mouseout() 和mouseover() 的功能很簡單分別用於處理鼠標移動時菜單項的顏色變化 

　　網頁浏覽運行環境為IE以上版本 

　　<HTML>

　　<HEAD>

　　<TITLE>網頁中的下拉菜單</TITLE>

　　</HEAD>

　　<SCRIPT LANGUAGE=JavaScript >

　　var IsDroped =false;

　　function mouseout()

　　{

　　 windoweventlor = white;//鼠標移開時置為白色

　　}

　　function mouseover()

　　{

　　 windoweventlor = red;//鼠標進入時置為紅色//鼠標進入時置為紅色

　　}

　　function doMenu(MenuID)

　　{

　　 var CurMenu = documentall(MenuID);

　　 //為避免閃爍如果下拉菜單已經顯示則不重畫

　　 if (IsDroped==true)

　　 {

　　 windoweventcancelBubble = true;

　　 return false;

　　 }

　　 windoweventcancelBubble = true;

　　 TempMenu = CurMenu;

　　 //計算下拉菜單的位置

　　 x = windoweventsrcElementoffsetLeft + windoweventsrcElementoffsetParentoffsetLeft;

　　 x = x + windoweventsrcElementoffsetWidth;

　　 y = padoffsetHeight;

　　 CurMenustyletop = y;

　　 CurMenustyleleft = x;

　　 CurMenustyleclip = rect( );

　　 CurMenustyledisplay = block;

　　 //延時毫秒後再顯示菜單保證ToolbarmenuoffsetHeight有值避免從主菜單移向下拉菜單時下拉菜單消失

　　 windowsetTimeout(showMenu() );

　　 return true;

　　}

　　function showMenu()

　　{

　　 y = y + TempMenuoffsetHeight;

　　 TempMenustyleclip = rect(auto auto auto auto);

　　 IsDroped =true;//下拉菜單已經顯示

　　}

　　function hideMenu()

　　{

　　 //如果在下拉菜單的范圍之內移動則不隱藏

　　 cY = eventclientY + documentbodyscrollTop;

　　 if (cY>=y && cY<y && eventclientX >= (x+) && eventclientX <= x ||

　　 cY> && cY<y && eventclientX >= (x+) && eventclientX <= x)

　　 { windoweventcancelBubble = true; return;}

　　 //隱藏

　　 TempMenustyledisplay = none;

　　 windoweventcancelBubble = true;

　　 IsDroped =false;

　　}

　　</SCRIPT>

　　<body topmargin= leftmargin= marginheight= marginwidth=>

　　<DIV ID=menu STYLE=position:absolute;backgroundcolor:white;width:%;top:;left:;>

　　 <DIV ID=pad STYLE=position:relative;height:;width:%;font:bold pt 宋體;backgroundcolor:#FFF;color:white;>

　　 <A TARGET=_top TITLE= ID=pad

　　 onmouseout=mouseout(); hideMenu(); onmouseover=mouseover(); doMenu(idpad);>

　　 菜單項一

　　 </A>

　　 <SPAN > </SPAN>

　　 <A TARGET=_top TITLE= ID=pad

　　 onmouseout=mouseout(); hideMenu(); onmouseover=mouseover(); doMenu(idpad);

　　 onclick=windoweventreturnValue=false;>

　　 菜單項二

　　 </A>

　　 </DIV>

　　</DIV>

　　<SPAN ID=idpad STYLE=display:none;position:absolute;width:;backgroundcolor:#FFF;paddingtop:;paddingleft:;paddingbottom:;zindex:;

　　 onmouseout=hideMenu();>

　　 <HR STYLE=position:absolute;left:;top:;color:white SIZE=>

　　 <DIV STYLE=position:relative;left:;top:;>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 HREF= TARGET=_top

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

　　 子菜單項一一

　　 </A><BR>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 HREF= TARGET=_top

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

　　 子菜單項一二

　　 </A><BR>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 HREF= TARGET=_top

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

　　 子菜單項一三

　　 </A>

　　 </DIV>

　　</SPAN> 　　

　　<SPAN ID=idpad STYLE=display:none;position:absolute;width:;backgroundcolor:#FFF;paddingtop:;paddingleft:;paddingbottom:;zindex:; onmouseout=hideMenu();>

　　 <HR STYLE=position:absolute;left:;top:;color:white SIZE=>

　　 <DIV STYLE=position:relative;left:;top:;>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 HREF= TARGET=_top

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

　　 子菜單項二一</A><BR>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 HREF= TARGET=_top

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

　　 子菜單項二二</A><BR>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 HREF= TARGET=_top

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

　　 子菜單項二三</A><BR>

　　 <HR STYLE=color:white SIZE=><!分隔行>

　　 <A ID=pad STYLE=textdecoration:none;cursor:hand;font:bold pt 宋體;color:white

　　 onclick=parentclose()

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

　　 退出系統</A>

　　 </DIV>

　　</SPAN>

　　<!頁面的其它內容>

　　</BODY>

　　</HTML>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19645.html
    《Javascript設計網頁中的下拉菜單》本文是由JSP教程免費提供，內容來源於互聯網,本文歸原作者所有。
  • 上一篇文章：

  • 下一篇文章：
    • 相關文章
    主板 CPU 硬盤 內存 顯卡 聲卡 顯示器 光驅 死機
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.