简洁的滑出菜单_菜单导航特效

一款风格简洁的CSS+JS滑出菜单，支持二级，不过你可将其变为三级，再嵌套一个LI列表就可以了，颜色你自己改，直到你满足为止。

<!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" mrc="text/html; charset=gb2312" /> 
<title>滑出菜单</title> 
<script language="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+=" over"; 
 } 
 node.onmouseout=function() { 
 this.className=this.className.replace(" over", ""); 
 } 
 } 
 } 
 } 
} 
window.onload=startList; 
</script> 
<style type="text/css"> 
<!-- 
body { 
  font: normal 12px verdana; 
  }

ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 150px; 
  border-bottom: 1px solid #ccc; 
  } 
   
ul li { 
  position: relative; 
  } 
   
li ul { 
  position: absolute; 
  left: 149px;
  top: 0; 
  display: none; 
  }

ul li a { 
  display: block; 
  text-decoration: none; 
  color: #0066cc; 
  background: skyblue;
  padding: 5px; 
  border: 1px solid #eeeeee;
  border-bottom: 0; 
  }

li:hover ul, li.over ul { display: block; } 
--> 
</style> 
</head>

<body> 
<ul id="nav">  
 <li><a href="/">首页</a></li>  
 <li><a href="#">ASP源码</a>  
 <ul>  
 <li><a href="#">社区论坛</a></li>  
 <li><a href="/">AJAX相关</a></li>  
 <li><a href="#">精品程序</a></li>  
 <li><a href="#">CMS建站</a></li>  
 <li><a href="#">聊天留言</a></li>  
 </ul>  
 </li>  
 <li><a href="#">PHP源码</a>  
 <ul>  
 <li><a href="#">新闻文章</a></li>  
 <li><a href="#">聊天留言</a></li>  
 <li><a href="#">论坛社区</a></li>  
 <li><a href="#">图片相册</a></li>  
 </ul>  
 </li>  
</ul>  
</body> 
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

简洁的滑出菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些