css3 手风琴

最近入手了大漠的《图解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;
    }

大功告成效果图如下

如有表达不当之处，欢迎各位指出，不胜感激