基于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> <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>
上一篇：js下为表格内部动态添加行的代码
栏 目：JavaScript代码
下一篇：bootstrap multiselect 多选功能实现方法
本文标题：基于JS代码实现导航条弹出式悬浮菜单
本文地址：http://www.codeinn.net/misctech/68764.html
