浏览 4192 次
锁定老帖子 主题:树形菜单
该帖已经被评为新手帖
|
|
---|---|
作者 | 正文 |
发表时间:2008-01-29
<!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>nav</title> <script type="text/javascript"> <!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="li") { node.onmouseover=function() { this.className+="on"; } node.onmouseout=function() { thisthis.className=this.className.replace("on", ""); } } } } } window.onload=startList; --> </script> <style type="text/css"> <!-- body { font-size: 12px font-family: Arial,Verdana,Helvetica,sans-serif; } ul{ margin: 0; padding: 0; list-style: none; width: 200px; } ul li { position: relative; } ul li ul { position: absolute; left: 199px; top: 0; display: none; list-style: none; width: 200px; margin: 0; padding: 0; } ul li a { display: block; text-decoration: none; background: #cccccc; padding:5px 0 5px 20px; border: 1px solid #ffffff; border-bottom: 0; color:#666666; } ul li a:hover { background: #cc0000; color:#ffffff; font-weight:bold; } * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } li:hover ul, li.on ul { display: block; } --> </style> </head> <body> <ul id="nav"> <li><a href="#">menu1</a> <ul class="nav2"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> </ul> </li> <li><a href="#">menu2</a> <ul class="nav2"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> <li><a href="#">menu3</a> <ul class="nav2"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> <li><a href="#">fifth</a></li> </ul> </li> <li><a href="#">menu4</a> <ul class="nav2"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> <li><a href="#">fifth</a></li> <li><a href="#">sixth</a></li> </ul> </li> </ul> </body> </html> 第二种 <!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>nav</title> <script type=text/javascript> <!-- var LastLeftID = ""; function DoMenu(emid){ var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)){ document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } --> </script> <style type="text/css"> <!-- body { font-family: Arial,Verdana,Helvetica,sans-serif; font-size:12px; } #nav { width:180px; list-style-type: none; text-align:left; margin:10px 0 0 10px; } #nav a { width: 180px; display: block; padding:5px 0 5px 20px; } #nav li { background:#cccccc; border-bottom:#ffffff 1px solid; float:left; } #nav li a:hover{ background:#cc0000; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666; text-decoration:none; } #nav a:hover { color:#ffffff; text-decoration:none; font-weight:bold; } #nav li ul { list-style:none; text-align:left; } #nav li ul li{ background: #ebebeb; } #nav li ul a{ padding-left:20px; width:180px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666; text-decoration:none; } #nav li ul a:hover { color:#f3f3f3; text-decoration:none; font-weight:normal; background:#cc0000; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } #nav ul.collapsed { display: none; } --> </style> </head> <body> <ul id="nav"> <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">menu1</a> <ul id="ChildMenu1" class="collapsed"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> <li><a href="#">fifth</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a> <ul id="ChildMenu2" class="collapsed"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> <li><a href="#">fifth</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> <li><a href="#">fifth</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> <li><a href="#">fifth</a></li> </ul> </li> </ul> </body> </html> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |