基于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 初体验(建议学习jquery)
Apr 25 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
JavaScript的Set数据结构详解
Feb 18 Javascript
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缓存设计实现代码
2011/09/30 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python学习入门之区块链详解
2017/07/25 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python3 读取Word文件方式
2020/02/13 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
教育局长自荐信范文
2013/12/22 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
春季运动会开幕词
2015/01/28 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
Python闭包的定义和使用方法
2022/04/11 Python
MySQL transaction事务安全示例讲解
2022/06/21 MySQL