基于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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
JS常用正则表达式总结
Nov 12 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
实用函数2
2007/11/08 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
Python绘制的二项分布概率图示例
2018/08/22 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2014年大学生工作总结
2014/11/20 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
2019 入党申请书范文
2019/07/10 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang