分享
 
 
 

&#106avascript设计网页中的下拉菜单

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

在网页制作时,为了更好地组织信息,使显示的信息分类明确、层次清晰,网页制作者往往费尽心机。常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(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() 的功能很简单,分别用于处理鼠标移动时菜单项的颜色变化。

网页浏览运行环境为IE4.0以上版本。

<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>

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有