DIV+CSS实现的滑动门菜单特效代码 - 快车库

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

528 查看

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>  
<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>

<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>  
   <a href="#">  
    <b class="h2">脚本之家</b>
  
    <b class="h3">[2007-05-16]</b>  
    <span>  
    <img alt="jb51.net  脚本之家" src="http://file.zhishichong.com/images/article/20160920/logo.gif"/>  
    脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
   </a>  
   </li>  
   <li>  
   <a href="#" title="网络编程">  
    <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 alt="jb51.net  脚本之家" src="http://file.zhishichong.com/images/article/20160920/logo.gif"/>  
    脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
   </a>  
   </li>  
   <li>  
   <a href="#" title="脚本专栏"> 
    <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 alt="jb51.net  脚本之家" src="http://file.zhishichong.com/images/article/20160920/logo.gif"/>  
    脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
   </a>  
   </li>  
   <li>  
   <a href="#" title="网页制作">  
    <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 alt="jb51.net  脚本之家" src="http://file.zhishichong.com/images/article/20160920/logo.gif"/>  
    脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
   </a>  
   </li>  
   <li>  
   <a href="#" title="实用技巧">  
    <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 alt="jb51.net  脚本之家" src="http://file.zhishichong.com/images/article/20160920/logo.gif"/>  
    脚本之家jb51.net,网页设计,网站制作建设,css学习,网页标准化  
    </span>  
   </a>  
   </li>  
  </ul>  
  </div>  
 <b class="b4 c4"></b>  
 <b class="b3 c3"></b>  
 <b class="b2 c2"></b>  
 <b class="b1 c1"></b>  
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最近更新的内容

CSS Gradient详解
JS核心系列：浅谈 call apply 与 bind
JS核心系列：浅谈原型对象和原型链
利用bootstrap的modal组件自定义alert，confirm和modal对话框
前端工程师是怎样一种职业
详解Javascript中的Object对象
JavaScript 开发最佳实践
谈笑风生组件化
彻底理解js中this的指向
javascript 作用域和 this 关键字

你可能感兴趣的文章

6本值得一读的JavaScript英文电子书
在JavaScript中一切都是对象吗？
使用 SVG 输出 Octicon
如何压缩 HTTP 请求正文
谈谈 HTTP/2 的协议协商机制
console对象–详解
HTTP 412 错误 – 先决条件失败 (Precondition failed)
CSS vs JS动画：谁更快？
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍
Web开发者色彩搭配快速指南

2025 - 快车库 - 我的知识库重庆启连科技有限公司渝ICP备16002641号-10
企客连连表单助手企服开发榜单123

渝公网安备 50010702501581号