导航条——弹出式悬浮菜单
2016-06-17 12:03
155 查看
1.概述
采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果。运行本实例,如图1所示,当鼠标移动到一级导航菜单的标题上时,将弹出悬浮菜单显示该菜单对应的子菜单,鼠标移出时,将隐藏悬浮菜单。
2.技术要点
本实例主要是在JavaScript中,动态改变<div>标签对象的style属性的display属性值来实现动态显示和隐藏二级导航菜单。其实,每一个一级菜单下的二级菜单内容是已经添加在网页的<div>标签中,只是此时设置了<div>不显示。所以,在JavaScript中,当鼠标经过某个导航的标题时,只需要调用指定的<div>对象,动态修改它的display属性即可,display属性包含两个用于显示和隐藏的属性值,分别为none(隐藏)和block(显示)。
例如:在网页中有一个id为mydiv的<div>标签,并设置了此<div>为隐藏。在JavaScript中,控制此<div>显示的写法如下:
3.具体实现
(1)编写用于显示和隐藏的JavaScript方法,当鼠标经过一级菜单标题时会显示二级菜单,当鼠标移出时会隐藏二级菜单。关键代码如下:
(2)在页面中,预先在<div>标签中为每个一级导航菜单添加二级菜单的内容,并设置二级菜单的<div>标签为隐藏。关键代码如下:
(3)在一级菜单的的表格的<td>中设置onMouseOver和onMouseOut事件,调用步骤(1)中定义的JavaScript的change()方法,动态改变二级菜单<div>的显示和隐藏。关键代码如下:
采用弹出式悬浮菜单,不但可以使网站的导航内容更加清晰,而且不影响页面的整体效果。运行本实例,如图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>
相关文章推荐
- 中国金融牌照大全(内附各牌照注册条件)
- NLP中人类的沟通模式
- JAVA_HOME是tomcat用的,classpath是jdk6之前版本用的,path是为了在cmd中能用才配置的
- 【win】MySQL安装配置说明
- BZOJ 1014 [JSOI2008]火星人prefix
- 数据库oracle 驱动版本
- Date get period
- 第三次冲刺及课程设计 617
- Java检查型异常和非检查型异常
- SpringMVC访问静态资源的三种方式
- mysql中查询到包含该字段的所有表名
- java检查异常与非检查异常
- 如何连接iPhone设备
- BZOJ 3207 花神的嘲讽计划Ⅰ
- 史上比较用心的纯代码实现 AutoLayout
- Java Calendar 类的格式操作
- Shiro架构介绍
- 大数据掀人类文明革命 探索更多未知
- Android binder架构解析
- 调用HTML5的Canvas API绘制图形的快速入门指南