基于JS代码实现导航条弹出式悬浮菜单


Posted in Javascript onJune 17, 2016

1.概述

采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果。运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单。

2.技术要点

本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单。其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示。所以,在JavaScript中,当鼠标经过某个导航的标题时,只需要调用指定的<div>对象,动态修改它的display属性即可,display属性包含两个用于显示和隐藏的属性值,分别为none(隐藏)和block(显示)。

例如:在网页中有一个id为mydiv的<div>标签,并设置了此<div>为隐藏。在JavaScript中,控制此<div>显示的写法如下:

document.getElementById("mydiv").style.display="block";

3.具体实现

(1)编写用于显示和隐藏的JavaScript方法,当鼠标经过一级菜单标题时会显示二级菜单,当鼠标移出时会隐藏二级菜单。关键代码如下:

function change(img,subMenu,path,type){
img.src="images/"+path+".GIF";
if(subMenu!=null){
if(type==0){
subMenu.style.display="none";
}else{
subMenu.style.display="block";
}
}
}

(2)在页面中,预先在<div>标签中为每个一级导航菜单添加二级菜单的内容,并设置二级菜单的<div>标签为隐藏。关键代码如下:

<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid; width:200px; position:absolute; display:none; left:1px; top: 34px;">
<table width="100%" border="0" height="35px" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="#">浏览员工信息</a>  <a href="#">添加新员工</a></td>
</tr>
</table>
</div>
...//此处省略了其他二级菜单的<div>内容

(3)在一级菜单的的表格的<td>中设置onMouseOver和onMouseOut事件,调用步骤(1)中定义的JavaScript的change()方法,动态改变二级菜单<div>的显示和隐藏。关键代码如下:

<td onMouseOver="change(ImgUser,NUser,'NUser_r',1)" onMouseOut="change(ImgUser,NUser,'NUser_b',0)" style="cursor:hand;">
<img id="ImgUser" src="images/NUser_b.GIF" width="106" height="48" border="0">
...//省略了二级菜单的<div>代码
</td>

以上所述是小编给大家介绍的导航条弹出式悬浮菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Javascript中的数组常用方法解析
Jun 17 #Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 #Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 #Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 #Javascript
jQuery实现区域打印功能代码详解
Jun 17 #Javascript
javascript日期比较方法实例分析
Jun 17 #Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 #Javascript
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
python处理按钮消息的实例详解
2017/07/11 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python中生成ndarray实例讲解
2021/02/22 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
我心目中的好老师活动方案
2014/08/19 职场文书
信息合作协议书
2014/10/09 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年推普周活动总结
2015/03/27 职场文书
公司搬迁通知
2015/04/20 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
python某漫画app逆向
2021/03/31 Python
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers