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

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()方法,动态改变二级菜单

的显示和隐藏。关键代码如下:



...//省略了二级菜单的
代码

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

你可能感兴趣的:(基于JS代码实现导航条弹出式悬浮菜单)