论坛首页 → 入门技术论坛 →

树形菜单

浏览 4177 次
锁定老帖子 主题：树形菜单
该帖已经被评为新手帖
作者 正文
  • chixianhuadeyu
  • 等级: 初级会员
  • 性别:
  • 文章: 13
  • 积分: 65
  • 来自: 北京
   发表时间：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> 
返回顶楼
         
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics