很多人在做web的级联下拉菜单时,常常利用Javascript来写,这里强烈不推荐使用这种方法,原因有两个:
1.必须利用onmouseover和onmouseout函数,效率先不说,非常复杂。尤其是设置到多级菜单的时候,需要利用递归,难度很大。
2.兼容性太差。写完的级联菜单在ie下正常,在Firefox就跑样了,同样在Firefox正常,在ie下就走样了,最后需要根据浏览器写两份Javascript,苦啊~~~。
这里推荐利用css生成下来菜单。方法直接,兼容性好,需要写Javascript代码。生成后的效果图如下图:
css级联菜单最重要的是下面两段代码:
#nav li ul {
opacity: 0; <!--默认二级菜单不显示,即ul透明,不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时,二级菜单不透明,即ul不通透,从而显示。-->
}
它的作用就是:鼠标经过一级菜单的时候二级菜单不透明,否则二级菜单透明,从而达到级联菜单的效果,很简单吧。 当然要想把样式做的话少些,还是要自己花些心思的。
下面是完整代码,附件也是完整代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>title</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
background:#ccc;
}
#nav {
list-style-type: none; <!--如果没有这句代码,ul就会出现默认样式。-->
height: 40px;
padding: 0;
margin: 0;
}
#nav li {
float: left;
position: relative !important; <!--如果没有这句代码,li菜单位置就会出现在最左边。-->
padding: 0;
line-height: 40px;
}
#nav li a {
display: block ; <!--如果没有这句代码,菜单会挤在一起。--> ;
width:120px;
color: #fff;
text-decoration: none;
background: #5a8078;
}
#nav li a:hover {
color: #a3f1d7;
}
#nav li ul {
opacity: 0; <!--默认二级菜单不显示,即ul透明,不显示。-->
position: absolute;
left: 0;
background: #63867f;
list-style-type: none;
}
#nav li:hover ul {
opacity: 1; <!--鼠标经过一级菜单时,二级菜单不透明,即ul不通透,从而显示。-->
}
#nav li ul li {
float: none ;
height: 0;
line-height: 0;
}
#nav li:hover ul li {
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a target="_blank" href="http://kutoku.com">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">桌面</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">主题</a></li>
<li><a style="background:#a5903c;" target="_blank" href="http://kutoku.com">PNG</a></li>
</ul>
</li>
<li><a target="_blank" href="http://kutoku.com">Contact</a></li>
</ul>
</body>
</html>
分享到:
相关推荐
JavaDB+JSP+AJAX实现的级联下拉菜单.htm
DWR+hibernate+spring级联下拉列表框 DWR+hibernate+spring级联下拉列表框
struts+hibernate+ajax级联菜单struts+hibernate+ajax级联菜单
JSP+JavaScript打造二级级联下拉菜单 简单的很哪 嘿嘿
在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
jsp + servlet 级联菜单 简单适用,非常适合新手!
本文件属于文章《使用面向对象的方式封装js级联下拉菜单列表的实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中cascadeMenu.js文件封装了级联菜单插件,可直接引入到html文件中使用。
JavaDB+JSP+AJAX实现的级联下拉菜单
网上级联菜单确有不少,单大多是直接写死到jsp页面中的,本代码是用mysql的数据库实现的,希望对大家有帮助!!!
用JSP+JavaScript打造二级级联下拉菜单
这是js控制的html网页的级联菜单,与数据库相连,从数据库中读取内容。
AJAX重构+级联下拉列表,java web前台级联下拉列表代码
Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单
很有用的javascript四级级联下拉菜单,国家-省级-市级-街道地区,可以扩展为无限级联,样式可以自行设计。
asp+access实现的级联菜单可以自己扩充 多级
JQuery写的日期级联下拉菜单 :可以直接运行,不需要部署iis 以便大家可以直接使用
利用Jquery实现级联下拉菜单效,其中运用到的知识有ASP.NET一般处理程序;Ajax,Json
---------------------------...2.内容:RS+BCH级联编译码误码率性能matlab仿真+简要说明文档+程序操作视频 3.用处:用于RS+BCH级联编译码算法编程学习 4.指向人群:本硕博等学习教研使用,企事业简单项目方案验证参考
级联菜单,多级菜单。自定义封装包可直接引用。
网上找了很久这种菜单,浪费了很多时间,实在没办法,只好老老实实去官网上按说明弄了一个,并更新了,jquery1.5.2, 希望给有需要的朋友可以节约一点时间,欢迎交流,qq:170262