繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript设计网页中的下拉菜单
- Javascript
- 可实现多表单提交的javascript函数
- 比较详细的关于javascript中void(0)的具体含义解释
- 随机显示经典句子或诗歌的javascript脚本
- javascript实现的多条新闻公告系统
- 解析arp病毒背后利用的Javascript技术附解密方法
- 比较详细的javascript对象的property和prototype是什么一种关系
- 访问百度和谷歌网速测试的javascript代码
- javascript 动态改变层的Z-INDEX的代码style.zIndex
- javascript+css实现单击颜色褪去效果
- javascript 表单日期选择效果
- 比较简单的javascript实现input双击后可以编辑
- javascript实现的颜色块滑动的动态效果
- js实现网页检测是否安装了 Flash Player 插件
- javascript 实现父窗口引用弹出窗口的值的脚本
- javascript 实现双击才能打开链接的方法
- 用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
- document.createElement("A")比较不错的属性
- 用javascript实现不按Ctrl实现Multiple Select多选
- JavaScript-世界上误解最深的语言分析
- IE和Mozilla的兼容性汇总event
Javascript 中的 javascript设计网页中的下拉菜单
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 336 ::
收藏到网摘: n/a
根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序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() 的功能很简单，分别用于处理鼠标移动时菜单项的颜色变化。
完整的源代码参见《电子与电脑》网站www.pccomputing.com.cn。
网页浏览的效果如图1所示，运行环境为IE4.0以上版本。
（图注WANGYE） 图1
<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)
评论 (0) All
