css3实现手风琴效果

来源:互联网 发布:网络推广专员骗局 编辑:程序博客网 时间:2024/05/16 05:32
<div class="accordionMenu"><div class="menuSeciton" id="brand"><h2><a href="#brand">brand</a></h2><p>Lorme ipsum dolor....</p></div><div class="menuSeciton" id="promotion"><h2><a href="#promotion">promotion</a></h2><p>Lorme ipsum dolor....</p></div><div class="menuSeciton" id="event"><h2><a href="#event">event</a></h2><p>Lorme ipsum dolor....</p></div></div>
<style>*{padding: 0; margin: 0;}a{text-underline: none;text-decoration: none;}.accordionMenu{background: #fff;color: #424242;font: 12px Arial, Verdana,sans-serif;margin: 0 auto;padding: 10px;width: 500px;}.accordionMenu h2{margin: 5px 0;padding: 0;position: relative;}.accordionMenu h2:before{border: 5px solid #fff;border-color: #fff transparent transparent;content: '';height: 0;position: absolute;right: 10px;top: 15px;width: 0;}.accordionMenu h2 a{background: #8f8f8f;background: -moz-linear-gradient(top,#cecece,#8f8f8f);background: -webkit-gradient(linear,left top ,left bottom, from(#cecece),to(#8f8f8f));background: -webkit-linear-gradient(top,#cecece,#8f8f8f);background: -o-linear-gradient(top,#cecece,#8f8f8f);background: linear-gradient(top,#cecece,#8f8f8f);border-radius: 5px;color: #424242;display: block;font-size: 13px;font-weight: bold;margin: 0;padding: 10px 10px;text-shadow:2px 2px 2px #aeaeae;}.accordionMenu h2 a,.accordionMenu h2 a:focus,.accordionMenu h2 a:hover,.accordionMenu h2 a:active{background: #2288dd;background: -moz-linear-gradient(top,#6bb2ff,#2288dd);background: -webkit-gradient(linear,left top,left bottom,from(#6bb2ff),to(#2288dd));background: -webkit-linear-gradient(top,#6bb2ff,#2288dd);background: -o-linear-gradient(top,#6bb2ff,#2288dd);background: linear-gradient(top,#6bb2ff,#2288dd);color:#fff;}.accordionMenu p{margin: 0;height: 0;overflow: hidden;padding: 0 10px;-moz-transition: height 0.5s ease-in;-webkit-transition: height 0.5s ease-in;-o-transition: height 0.5s ease-in;transition: height 0.5s ease-in;}.accordionMenu :target p{height: 100px;overflow: auto;}.accordionMenu :target h2:before{ /*展开时标题三角图标*/border-color: transparent transparent transparent #fff;}</style>

0 0
原创粉丝点击