DIV+CSS实现的滑动门菜单特效代码


答案：<!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>脚本之家DIV+CSS实现的滑动门菜单特效 </title>  
<style type="text/Css">  
#menu {  
  margin:0;  
  padding:0;  
  height:26em;  
  overflow:hidden;  
  background:#FFFCF2;  
  }  
#menu li {  
  list-style-type:none;  
  float:left;  
  display:block;  
  width:100%;  
  }  
#menu li a {  
  display:block;  
  text-decoration:none;  
  color:#00b;  
  margin:0;  
  width:100%;  
  }  
#menu li a span {  
  display:none;  
  color:#453739;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  font-size: 12px;  
  padding: 10px 0px 5px;  
  }  
#menu li a.one span {  
  display:block;  
  height:15em;  
  margin:0 10px;  
  }  
#menu li a:hover {  
  background:#FFFCF2;  
  }  
#menu li a:hover span {  
  display:block;  
  height:15em;  
  margin:0 10px;  
  cursor:pointer;  
  }  
#menu .h2 {  
  margin:0 5px;  
  padding:0;  
  color:#933A34;  
  font-size:12px;  
  border:0;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  }  
#menu .h3 {  
  margin:0 5px;  
  padding:0;  
  font-size:10px;  
  color:#62583B;  
  font-family: Verdana, Arial, Helvetica, sans-serif;  
  }  
#menu img {  
  margin:0px 5px 5px;  
  border:1px solid #000;  
  float:left;  
  }  
.curved {  
  width:21em;  
  }  
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {  
  font-size:1px;  
  display:block;  
  background:#C7BC98;  
/* hide overflow:hidden from IE5/Mac */  
/* */  
overflow: hidden;  
/* */  
}  
.curved .b1, .curved .b2, .curved .b3 {  
  height:1px;  
  }  
.curved .b2, .curved .b3, .curved .b4 {  
  background:#FFFCF2;  
  border-left:1px solid #C7BC98;  
  border-right:1px solid #C7BC98;  
  }  
.curved .b1 {  
  margin:0 4px;  
  background:#C7BC98;  
  }  
.curved .b2 {  
  margin:0 2px;  
  border-width:0 2px;  
  }  
.curved .b3 {  
  margin:0 1px;  
  }  
.curved .b4 {  
  height:2px;  
  margin:0;  
  }  
.curved .c1 {  
  margin:0 5px;  
  background:#C7BC98;  
  }  
.curved .c2 {  
  margin:0 3px;  
  border-width:0 2px;  
  }  
.curved .c3 {  
  margin:0 2px;  
  }  
.curved .c4 {  
  height:2px;  
  margin: 0 1px;  
  }  
.curved .boxcontent {  
  display:block;  
  background:transparent;  
  border-left:1px solid #C7BC98;  
  border-right:1px solid #C7BC98;  
  font-size:0.9em;  
  text-align:justify;  
  }  
</style>  
</head>  

<body>  
<div class="curved">  
 <b class="b1 c1"></b>  
 <b class="b2 c2"></b>  
 <b class="b3 c3"></b>  
 <b class="b4 c4"></b>  
  <div class="boxcontent">  
  <ul id="menu">  
   <li>  
     
    <b class="h2">脚本之家</b>
  
    <b class="h3">[2007-05-16]</b>  
    <span>  
    <img src="/upload/20121014/logoc0mmxto4eh1.gif" alt="zzzyk.com  脚本之家" />  
    脚本之家zzzyk.com,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
     
   </li>  
   <li>  
     
    <b class="b1"></b>  
    <b class="b2"></b>  
    <b class="b3"></b>  
    <b class="b4"></b>  
    <b class="h2">网络编程</b>
  
    <b class="h3">[2007-05-16]</b>  
    <span>  
    <img src="/upload/20121014/logoc0mmxto4eh1.gif" alt="zzzyk.com  脚本之家" />  
    脚本之家zzzyk.com,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
     
   </li>  
   <li>  
    
    <b class="b1"></b>  
    <b class="b2"></b>  
    <b class="b3"></b>  
    <b class="b4"></b>  
    <b class="h2">脚本专栏</b>
  
    <b class="h3">[2006-06-18]</b>  
    <span>  
    <img src="/upload/20121014/logoc0mmxto4eh1.gif" alt="zzzyk.com  脚本之家" />  
    脚本之家zzzyk.com,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
     
   </li>  
   <li>  
     
    <b class="b1"></b>  
    <b class="b2"></b>  
    <b class="b3"></b>  
    <b class="b4"></b>  
    <b class="h2">网页制作相关知识</b>
  
    <b class="h3">[2007-05-16]</b>  
    <span>  
    <img src="/upload/20121014/logoc0mmxto4eh1.gif" alt="zzzyk.com  脚本之家" />  
    脚本之家zzzyk.com,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
     
   </li>  
   <li>  
     
    <b class="b1"></b>  
    <b class="b2"></b>  
    <b class="b3"></b>  
    <b class="b4"></b>  
    <b class="h2">实用技巧</b>
  
    <b class="h3">[2007-05-16]</b>  
    <span>  
    <img src="/upload/20121014/logoc0mmxto4eh1.gif" alt="zzzyk.com  脚本之家" />  
    脚本之家zzzyk.com,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
     
   </li>  
  </ul>  
  </div>  
 <b class="b4 c4"></b>  
 <b class="b3 c3"></b>  
 <b class="b2 c2"></b>  
 <b class="b1 c1"></b>  
</div>  
</body>  
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：CSS对Web页面载入效率的影响分析总结
下一个：Marquee高级用法实例代码
更多图片编程知识: