css+js写的二级菜单

这个二级纵向菜单完成是照着别人的例子写的,网上很多这样的代码,感觉这种最简单而且很容易理解,对css熟练的话几分钟就可以搞定,关键是和程序容易结合。
最终效果如图所示:



ul,li,a{margin:0;padding:0;}   //这个很重要,我竟然不知道它会有缩进,郁闷
  
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;   
 padding:0;   
}   
  
#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;   
}   
#content {   
 clear: left;    
}   
#nav ul.collapsed {   
 display: none;   
}  
  
#nav li:hover ul {   //以下代码不懂什么意思,好像无关紧要(去掉完全没影响)……
 left: auto;   
}   
#nav li.sfhover ul {   
 left: auto;   
}   
 


<body>  
<ul id="nav">  
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">menu1</a>  
         <ul >  
             <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>  


  
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>  

js很简单吧,整体感觉还是不错的,很实用。

你可能感兴趣的:(JavaScript,html,css)