基于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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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 多行多列显示
2009/08/15 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
JavaScript链式调用实例浅析
2018/12/19 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
Scrapy的简单使用教程
2017/10/24 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
求职推荐信
2013/10/28 职场文书
蓝颜请假条
2014/04/11 职场文书
关于安全的标语
2014/06/10 职场文书
公司外出活动方案
2014/08/14 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
2015年财务部工作总结
2015/04/10 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
MySQL创建管理子分区
2022/04/13 MySQL