- 纯 CSS3 实现的窗帘菜单（折叠面板），垂直方向的折叠菜单效果，点击菜单标题就可向下展开所属的菜单内容。TAB1用来显示了一段文字，TAB2用来显示一个嵌套的网页，TAB3用来显示一张图片，当然，这些都是为了演示随便弄上去的，实际使用中你完全可以将它们修改成你喜欢的折叠菜单。
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Accordion 折叠菜单面板</title>
<style>
*{margin:0; padding:0;}
body{color:#fff; font:14px/1.3 Tahoma;}
header{background-color:#212121; box-shadow: 0 -1px 2px #111111; display:block; height:70px; position:relative; width:100%; z-index:100;}
header h2{font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px;}
header a.stuts,a.stuts:visited{border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0;}
header .stuts span{font-size:22px; font-weight:bold; margin-left:5px;}
.container{border-top: 5px solid #000000; height: 600px; overflow: hidden; position: relative; width: 100%;}
.content{margin:0 auto; width:900px;}
.accordion{color: #000000; margin: 50px auto; position: relative; width: 590px;}
.accordion span{display: none}
.tabs{background-color: #FFFFFF; overflow: hidden;}
.tabs dl dd a{background-color: #C8CEFF; border: 1px solid; border-color:#ccc;border-bottom-color:#aaa; display: block; font-size: 18px; line-height: 32px; padding: 5px 20px; text-decoration: none; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%); background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%); background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0)); background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%); background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%); -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;}
.tabs dl dd div{background-color: #FFF; height: 0; overflow: hidden; box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset; -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.tabs dl dd div p{color: #444444; font-size: 13px; padding: 15px; text-align: justify;}
.tabs dl dd a:hover{box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;}
.tabs dl dd a:active{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc); background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc)); background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);}
#tab1:target ~ .tabs .tab1 dd div{height: 100px;}
#tab2:target ~ .tabs .tab2 dd div{height: 345px;}
#tab3:target ~ .tabs .tab3 dd div{height: 155px;}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a
a{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc); background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc)); background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;}
</style>
</head>
<body>
<div class="container">
<div class="accordion">
<span id="tab1"></span>
<span id="tab2"></span>
<span id="tab3"></span>
<span id="tab4"></span>
<div class="tabs">
<dl class="tab1">
<dd>
<a href="#tab1">Tab #1</a>
<div><p>这是一个折叠面板的测试例子，这里用来显示文字，你在这里可以放置一段文字，或一个列表之类的，还不错吧。.</p></div>
</dd>
</dl>
<dl class="tab2">
<dd>
<a href="#tab2">Tab #2</a>
<div>
<p>
<iframe width="560" height="315" src="http://www.baidu.com" frameborder="0" allowfullscreen></iframe>
</p>
</div>
</dd>
</dl>
<dl class="tab3">
<dd>
<a href="#tab3">Tab #3</a>
<div><p><img src="http://www.baidu.com/img/bdlogo.gif" /></p></div>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
标签：网站源码