脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js导航条悬浮菜单

基于JS代码实现导航条弹出式悬浮菜单

 更新时间：2016年06月17日 14:33:02   作者：柯南&  
这篇文章主要介绍了基于JS代码实现导航条弹出式悬浮菜单的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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>&nbsp;&nbsp;<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>

以上所述是小编给大家介绍的导航条弹出式悬浮菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • bootstrap实现二级下拉菜单效果

    bootstrap实现二级下拉菜单效果

    这篇文章主要为大家详细介绍了bootstrap实现二级下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JavaScript数据结构之双向链表

    JavaScript数据结构之双向链表

    这篇文章主要为大家详细介绍了JavaScript数据结构之双向链表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信、QQ、微博、Safari中使用js唤起App

    微信、QQ、微博、Safari中使用js唤起App

    本篇文章主要介绍了js在微信、微博、QQ、Safari唤起App的解决方案，有这方面需要的朋友参考下吧。
    2018-01-01
  • 微信小程序图片自适应实现解析

    微信小程序图片自适应实现解析

    这篇文章主要介绍了微信小程序图片自适应实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 如何让页面加载完成后执行js

    如何让页面加载完成后执行js

    本篇文章是对如何让页面加载完成后执行js的解决方法进行了详细的分析介绍，需要的朋友参考下
    2013-06-06
  • 鸿蒙系统中实现图片上传功能全流程

    鸿蒙系统中实现图片上传功能全流程

    在鸿蒙系统中实现图片上传功能,整体流程可以类比为 “选快递→填单→发货→签收” 的过程,下面给大家介绍鸿蒙系统中实现图片上传功能全流程,感兴趣的朋友一起看看吧
    2025-04-04
  • 微信小程序实现性别单选效果

    微信小程序实现性别单选效果

    这篇文章主要为大家详细介绍了微信小程序实现性别单选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 跟我学习javascript的最新标准ES6

    跟我学习javascript的最新标准ES6

    跟我学习javascript的最新标准ECMAScript 6，ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，代号harmony，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript函数声明和函数表达式的区别

    JavaScript函数声明和函数表达式的区别

    这篇文章主要介绍了JavaScript函数声明和函数表达式的区别，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-06-06
  • TypeScript利用TS封装Axios实战

    TypeScript利用TS封装Axios实战

    这篇文章主要介绍了TypeScript利用TS封装Axios实战，TypeScript封装一遍Axios，能进一步巩固TypeScript的基础知识，需要的小伙伴可以参考一下
    2022-06-06

最新评论