全兼容的标准三级菜单

首先，说明一下这不是纯CSS的，如果要用纯CSS实现的话要用到很多[if IE 6]的判断，感觉页面的标签很乱，个人不太喜欢。说到底还是因为这万恶的IE6,基本上问题都是出在这里，本例用的是JS，但也用了一个[if IE 6]的判断，用来在IE6下改变标签的class。虽然是用了JS，但页面结构却清爽得多。

可能有些朋友见过，原本是在一个国外网站上看到的，不过写得有点复杂，我简化了一下，帖上来。

<!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=utf-8" /> <title>三级菜单</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>  <script type="text/javascript" src="js/jquery.js"> $(document).ready(function() { $('.links li code').hide(); $('.links li p').click(function() { $(this).next().show(); }); }); </script> <style type="text/css"> ul { padding:0; margin:0;} #navmenu {margin:0px; width:160px;} #navmenu li {margin:0px; width:160px; list-style-type:none;} #navmenu ul {margin:0px; width:160px;} #navmenu li {float:left; width:100%; position:relative;} #navmenu li.iehover {z-index:1000;} #navmenu ul {display:none; z-index:9999; left:100%; position:absolute; top:0px;} #navmenu a {padding:10px 6px; border-right:#FFF 1px solid; border-top:#FFF 1px solid; display: block; background:#DDD; color:#666; text-decoration:none;} #navmenu a:hover {background:#BBB; color:#FFF;} #navmenu li:hover ul ul {display:none;} #navmenu li.iehover ul ul {display:none;} #navmenu li:hover ul {display:block;} #navmenu ul li:hover ul {display:block;} #navmenu ul ul li:hover ul {display:block;} #navmenu li.iehover ul {display:block;} #navmenu ul li.iehover ul {display:block;} #navmenu ul ul li.iehover ul {display:block;} </style> </head> <body> <div id="content"> <ul id="navmenu"> <li><a href="#">Home</a> </li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">qrayg.com</a> </li> <li><a href="#">craigerskine.com</a></li> <li><a href="#">dt.qrayg.com</a></li> <li><a href="#">legendofmana.info</a> </li></ul></li> <li><a href="#">Sketchbook</a> </li> <li><a href="#">Free Interfaces</a> </li> </ul></li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">Aqua Button</a> </li> <li><a href="#">Aqua Button 2</a></li> <li><a href="#">Water Drop</a> </li> <li><a href="#">Light FX</a> </li> <li><a href="#">Light FX2</a></li> </ul></li> <li><a href="#">CSS +</a> <ul> <li><a href="#">CSS Menus</a> </li> <li><a href="#">Sprite Nav</a> </li> <li><a href="#">@import</a></li> </ul></li></ul></li> <li><a href="#">Contact</a> </li></ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Moondy 发表于 2009-5-26 2,535 Views | 类别: Xhtml/Css

Moondy’s Zone
一位IT民工的点点滴滴…… WEB前端、网页重构、AS3