标签：
最近入手了大漠的《图解css3》所以会寻找一些案例来尝试，顺便和大家交流学习
今天和大家分享的css3实现手风琴效果也是从大漠老师那里学来的
============================分割线======================================
首先看一下布局结构
<div class="accordionMenu"> <ul> <li> <h2>Brand</h2> <p>Lorem ipsum dolor sit amet...</p> </li> <li> <h2>Brand</h2> <p>Lorem ipsum dolor sit amet...</p> </li> <li> <h2>Brand</h2> <p>Lorem ipsum dolor sit amet...</p> </li> <li> <h2>Brand</h2> <p>Lorem ipsum dolor sit amet...</p> </li> </ul> </div>
接下来给结构添加一些样式，这里实现手风琴效果的关键是控制li的高度以及overflow:hidden来达到手风琴的“展开，收起”效果
.accordionMenu{
position: relative;
width: 400px;
margin: 0 auto;
}
.accordionMenu ul{
width: 100%;
list-style:none;
}
.accordionMenu ul li{
position: relative;
display: block;
height: 40px;
overflow: hidden;
margin: 0px;
padding: 0;
transition: height .3s ease-in-out;
-webkit-transition: height .3s ease-in-out;
}
.accordionMenu li h2{
height:18px;
line-height:18px;
font-size: .6em;
border:1px solid #eee;
padding:10px;
margin: 0;
background: #f00;
}
.accordionMenu h2:before{
border:5px solid #fff;
content:"";
border-color:#fff transparent transparent;
width: 0;
height: 0;
position:absolute;
top:15px;
right:15px;
}
从样式可以看出在.accordionMenu ul li中添加了动画效果以实现平缓过渡效果
.accordionMenu ul li{
position: relative;
display: block;
height: 40px;
overflow: hidden;
margin: 0px;
padding: 0;
transition: height .3s ease-in-out;
-webkit-transition: height .3s ease-in-out;
}
最后通过伪元素来设置li的高度和相关背景色的新值
.accordionMenu li:hover{
background: #eee;
height:200px;
}
.accordionMenu li:hover h2{
background: lime;
}
.accordionMenu li:hover h2:before{
border-color:transparent transparent transparent #000;
}
大功告成效果图如下
如有表达不当之处，欢迎各位指出，不胜感激
标签：
原文地址：http://www.cnblogs.com/V-JACK/p/4799334.html
