Javascript设计网页中的下拉菜单
我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域,用于显示主菜单条,每一个主菜单条作为一个超链接横向置于该区域中,当然除非菜单项没有子菜单,一般情况下这里的超链接不指向任何地址,只用它来激活子菜单。区域的格式见程序1。
CODE: <DIV ID='pad' ……>
<A ID='pad1' οnmοuseοut="mouseout(); hideMenu();" οnmοuseοver="mouseover();
doMenu('idpad1');" οnclick="window.event.returnValue=false;">菜单项一</A>
<A ID='pad2' οnmοuseοut="mouseout(); hideMenu();" οnmοuseοver="mouseover();
doMenu('idpad2');" οnclick="window.event.returnValue=false;">菜单项二</A>
……
</DIV>
接着,我们根据主菜单条的个数定义相应的子菜单,为每个子菜单定义一个区域,该区域中第一个元素是一条横线,然后每个子菜单作为一个超链接置于该区域中,由于子菜单纵向排列,每个超链接后加<BR>换行。当然这个区域现在还不能显示出来,但当它被激活时,其显示位置应位于其他对象之上,所以其style属性置为STYLE=' display:none; z-index:9;'。 注意每个超链接的ID均应与其主菜单的ID相同,以便于统一处理。格式见程序2。
CODE: <SPAN ID='idpad1' STYLE='display:none; z-index:9;' οnmοuseοut='hideMenu();'>
<HR STYLE='position:absolute;left:0;top:0;color:white' SIZE=1>
<DIV >
<A ID='pad1' HREF='11.htm' οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项一一</A><BR>
<A ID='pad1' HREF='12.htm' οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项一二</A><BR>
<HR STYLE='color:white' SIZE=1><!--如有必要可以用横线对子菜单分组-->
<A ID='pad1' HREF='13.htm' οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项一三</A><BR>
……
</DIV>
</SPAN>
经过上面的步骤,下拉菜单的格式已经定义好了,下面的任务就是控制这些子菜单的显示和隐藏。
当鼠标移动到主菜单条上时,应显示其子菜单,我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成。过程的参数MenuID是代表子菜单的区域的ID,过程执行时先设置window.event. cancelBubble = true,并计算子菜单显示的位置,包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域:
CODE: 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以上版本。
(图注WANGYE) 图1
CODE: <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'
οnmοuseοut="mouseout(); hideMenu();" οnmοuseοver="mouseover(); doMenu('idpad1');">
菜单项一
</A>
<SPAN style="color:white"> </SPAN>
<A TARGET='_top' TITLE='' ID='pad2'
οnmοuseοut="mouseout(); hideMenu();" οnmοuseοver="mouseover(); doMenu('idpad2');"
οnclick="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;'
οnmοuseοut='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'
οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项一一
</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'
HREF='12.htm' TARGET='_top'
οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项一二
</A><BR>
<A ID='pad1' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'
HREF='13.htm' TARGET='_top'
οnmοuseοut="mouseout();" οnmοuseοver="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;' οnmοuseοut='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'
οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项二一</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'
HREF='22.htm' TARGET='_top'
οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
子菜单项二二</A><BR>
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'
HREF='23.htm' TARGET='_top'
onmouseot="mouseout();" οnmοuseοver="mouseover()">
子菜单项二三</A><BR>
<HR STYLE='color:white' SIZE=1><!--分隔行-->
<A ID='pad2' STYLE='text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white'
οnclick="parent.close()"
οnmοuseοut="mouseout();" οnmοuseοver="mouseover()">
退出系统</A>
</DIV>
</SPAN>
<!--页面的其它内容-->
</BODY>
</HTML>
转载于:https://www.cnblogs.com/deve/archive/2008/12/30/2242787.html
Javascript设计网页中的下拉菜单相关推荐
- Delphi访问网页中的下拉菜单
Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml; procedure TForm1.Button1Click(Sender: TObject); ...
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
- 新版HyperMesh的Assemblies中调出下拉菜单查看Component(装配关系模型树)
新版HyperMesh的Assemblies中调出下拉菜单查看Component(装配关系模型树) 从Altair更新的2019版本开始,在Model模型树中找不到Assemblies了,这样导致好多 ...
- html 下拉框设置名称,html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单...
html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...
- python choice添加下拉框_自定义Django Form中choicefield下拉菜单选取数据库内容实例...
工作中遇到的问题,自定义了一个forms.form表单,某项需要作出下拉菜单,下拉菜单中的选项需要从数据库(objectForm models)中提取. form.py为: class objectF ...
- python下拉菜单_自定义Django Form中choicefield下拉菜单选取数据库内容实例
工作中遇到的问题,自定义了一个forms.form表单,某项需要作出下拉菜单,下拉菜单中的选项需要从数据库(objectForm models)中提取. form.py为: class objectF ...
- 在excel的单元格中设置下拉菜单
很多时候我们在编辑excel的时候,在插入相同的内容时显得比较繁琐,下面教大家在excel单元格中设置下拉菜单,直接点击后更改单元格内容..步骤如下: 1.选中一列,然后点击菜单栏"数据&q ...
- excel中通过下拉菜单显示不同的报表内容,类似下拉选项中,一旦切换内容,后面的表格内容全都不同?
EXCEL是日常办公中应用非常多的办公软件之一,其强大的数据统计.分析功能为我们的工作带来不少方便.我们可以在EXCEL中设置下拉菜单,以方便我们输入相同内容.本文就以将性别设置为下拉菜单为例,介绍具 ...
- 为什么微信截图无法截取其他软件中的下拉菜单
原因终于找到了: 想要截取其他软件中的下拉菜单,不能使用微信默认的截屏快捷键!!! 改一下快捷键就可以了!!!
- 【自学HTML笔记第5篇】HTML中的下拉菜单标签
我们每个人都有瑕疵,不满别人的同时我们更应该去懂得理解和接受: 目录 下拉菜单标签: 代码演示: select 标签常用属性: 代码演示: option标签常用属性: 代码演示: 如果觉得写的不错,就 ...
最新文章
- Python教程WEB安全篇
- Ubuntu 12.04安装NFS server
- 2021年度最全面JVM虚拟机,类加载过程与类加载器
- flask + 蓝图 用 sqlalchemy 对 mysql 进行 增删查改 的 demo
- 两个表点击分页的时候怎么判断点的是哪一个表_如何对指数估值,估值表怎么用?...
- AcWing292.炮兵阵地(状压DP)题解
- 250个jquery 插件
- 基于php的小区物业管理系统
- plsql连接mysql教程_plsql直连数据库教程
- CAN总线波特率计算方法
- Windows Server 2008搭建FTP服务
- shiro加盐走源码
- 网格简化技术研究报告
- 如何使用 Swift 开发简单的条形码检测器?
- 小森生活服务器维护还要多久,小森生活暮夕深林材料刷新时间是多久_暮夕深林材料刷新时间位置汇总_3DM手游...
- 如何成为合格的LINUX系统管理员(ZZ)
- unity3D 点击按钮 播放音频
- RNN代码简单实现(周杰伦歌词示例)
- 他是“创业教父”,做出4家上市公司,秘诀6个字:找俗人,打呆仗!
- cisco 路由器时间戳service timestamps