当前位置:首页 > 网页特效 > css样式 >

窗帘菜单Accordion折叠面板纯CSS3实现

时间:2013-12-19 09:05 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 纯 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>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-css/6521.html

css样式下载排行

最新文章