`
ice-cream
  • 浏览: 322511 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

二级菜单效果（2）

JavaScriptXHTMLCSSHTML 
阅读更多 

<!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>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">
<!--
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;
}

#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>
 
  • 大小: 17.4 KB
分享到：
| HTTP协议的几个重要概念
评论
2 楼 rebecca 2011-09-16  
var LastLeftID  这个变量代表什么？谢谢^^
1 楼 haizhan 2008-12-23  
看看了 学习学习 以后能用着
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics