前端之家收集整理的这篇文章主要介绍了
基于JS代码实现导航条弹出式悬浮菜单，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
1.概述
采用弹出式悬浮菜单，不但可以使网站的导航内容更加清晰，而且不影响页面的整体效果。运行本实例，如图1所示，当鼠标移动到一级导航菜单的标题上时，将弹出悬浮菜单显示该菜单对应的子菜单，鼠标移出时，将隐藏悬浮菜单。
2.技术要点
本实例主要是在JavaScript中，动态改变
标签对象的style
属性的display
属性值来实现动态
显示和隐藏二级导航
菜单。其实，每一个一级
菜单下的二级
菜单内容是已经
添加在网页的
标签中，只是此时设置了
不显示。所以，在JavaScript中，当鼠标经过某个导航的
标题时，只需要
调用指定的
对象，动态
修改它的display
属性即可，display
属性包含两个用于
显示和隐藏的
属性值，分别为none（隐藏）和block（
显示）。
例如：在网页中有一个id为mydiv的
标签，并设置了此
为隐藏。在JavaScript中，控制此
显示的写法如下：
3.具体实现
（1）编写用于显示和隐藏的JavaScript方法，当鼠标经过一级菜单标题时会显示二级菜单，当鼠标移出时会隐藏二级菜单。关键代码如下：
（2）在页面中，预先在
标签中为每个一级导航
菜单添加二级
菜单的
内容，并设置二级
菜单的
标签为隐藏。关键
代码如下：
...//此处省略了其他二级菜单的
（3）在一级菜单的的表格的SEOver和onMouSEOut事件，调用步骤（1）中定义的JavaScript的change()方法，动态改变二级菜单的
显示和隐藏。关键
代码如下：
SEOver="change(ImgUser,NUser,'NUser_r',1)" onMou
SEOut="change(ImgUser,'NUser_b',0)" style="cursor:hand;">
菜单的
以上所述是小编给大家介绍的导航条弹出式悬浮菜单。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/47790.html
