基于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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Vue 按键修饰符处理事件的方法
May 04 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
js实现input密码框显示/隐藏功能
Sep 10 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
Postman无法正常返回结果问题解决
Aug 28 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数组循环操作详细介绍 附实例代码
2013/02/03 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
php实现头像上传预览功能
2017/04/27 PHP
php实现微信支付之退款功能
2018/05/30 PHP
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
windows 下python+numpy安装实用教程
2017/12/23 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
市场营销专业推荐信
2013/11/03 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
企业精神口号
2014/06/11 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
OpenCV 图像梯度的实现方法
2021/07/25 Python
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript