1.概述
采用弹出式悬浮菜单，不但可以使网站的导航内容更加清晰，而且不影响页面的整体效果。运行本实例，如图1所示，当鼠标移动到一级导航菜单的标题上时，将弹出悬浮菜单显示该菜单对应的子菜单，鼠标移出时，将隐藏悬浮菜单。
2.技术要点
本实例主要是在JavaScript中，动态改变
标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单。其实，每一个一级菜单下的二级菜单内容是已经添加在网页的
标签中，只是此时设置了
不显示。所以，在JavaScript中，当鼠标经过某个导航的标题时，只需要调用指定的
对象，动态修改它的display属性即可，display属性包含两个用于显示和隐藏的属性值，分别为none（隐藏）和block（显示）。
例如：在网页中有一个id为mydiv的
标签，并设置了此
为隐藏。在JavaScript中，控制此
显示的写法如下：
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）在页面中，预先在
标签中为每个一级导航菜单添加二级菜单的内容，并设置二级菜单的
标签为隐藏。关键代码如下：
...//此处省略了其他二级菜单的内容（3）在一级菜单的的表格的
中设置onMouseOver和onMouseOut事件，调用步骤（1）中定义的JavaScript的change()方法，动态改变二级菜单 的显示和隐藏。关键代码如下：
...//省略了二级菜单的
代码以上所述是小编给大家介绍的导航条弹出式悬浮菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对全福编程网网站的支持！
相关推荐
- document.domain会导致ueditor拒绝访问解决办法
- Javascript实现代码折叠功能
- 深入浅出ES6之let和const命令
- PhotoSwipe异步动态加载图片方法
- 相册展示PhotoSwipe.js插件实现
- 移动端点击图片放大特效PhotoSwipe.js插件实现
- 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
- 手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
- 手机图片预览插件photoswipe.js使用总结
- select隐藏选中值对应的id,显示其它id的简单实现方法
- Js得到radiobuttonlist选中值的两种方法(推荐)
- 总结JavaScript的正则与其他语言的不同之处
- js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
- JS实现图片延迟加载并淡入淡出效果的简单方法
- JavaScript中闭包之浅析解读(必看篇)
- 微信JS接口大全
- JS解决iframe之间通信和自适应高度的问题
- 浅析Javascript ES6新增值比较函数Object.is
- js图片上传前预览功能（兼容所有浏览器）
- 前端程序员必须知道的高性能Javascript知识
文章分类
热门关键词
热门文章
最新更新
