DIV+CSS 级联上拉菜单 多级上拉菜单
DIV+CSS 级联下拉菜单 多级下拉菜单
很多人在做web的级联下拉菜单时,常常利用Javascript来写,这里强烈不推荐使用这种方法,原因有两个:
1.必须利用onmouseover和onmouseout函数,效率先不说,非常复杂。尤其是设置到多级菜单的时候,需要利用递归,难度很大。
2.兼容性太差。写完的级联菜单在ie下正常,在Firefox就跑样了,同样在Firefox正常,在ie下就走样了,最后需要根据浏览器写两份Javascript,苦啊~~~。
这里推荐利用css生成下来菜单。方法直接,兼容性好,需要写Javascript代码。生成后的效果图如下图:
css级联菜单最重要的是下面两段代码:
它的作用就是:鼠标经过一级菜单的时候二级菜单不透明,否则二级菜单透明,从而达到级联菜单的效果,很简单吧。 当然要想把样式做的话少些,还是要自己花些心思的。
下面是完整代码,附件也是完整代码。
很多人在做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>