基于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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
Javascript实现字数统计
Jul 03 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JS实现随机点名器
2020/04/12 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python中创建二维数组
2018/10/17 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
详解python polyscope库的安装和例程
2020/11/13 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
几个判断型的面试题
2012/07/03 面试题
金融专业个人求职信
2013/09/22 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
高中语文课后反思
2014/04/27 职场文书
妇联主席先进事迹
2014/05/18 职场文书
三问三解心得体会
2014/09/05 职场文书
内勤岗位职责
2015/02/10 职场文书
同学毕业留言寄语
2015/02/27 职场文书
亮剑观后感
2015/06/05 职场文书
获奖感言一句话
2015/07/31 职场文书