美文网首页集锦录PHPH5学习笔记
目标伪类选择器实现手风琴效果

目标伪类选择器实现手风琴效果

作者: eternalshallow | 来源:发表于2016-07-25 15:18 被阅读181次
    Paste_Image.png

    闲话不多说,直接上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .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 transparent;
                border-top-color: #fff; 
               content: '';
                height: 0;
                position: absolute;
                right: 10px; 
               top: 15px;
                width: 0;
            } 
           .accordionMenu h2 a{
                background: #8f8f8f; 
               border-radius: 5px; 
               color: #424242;
                display: block; 
               font-size: 13px;
                font-weight: normal; 
               margin: 0; 
               padding: 10px;
                text-shadow:  2px 2px 2px #aeaeae;
                text-decoration: none;
            } 
           .accordionMenu :target h2 a,
            .accordionMenu h2 a:focus,
            .accordionMenu h2 a:hover,
            .accordionMenu h2 a:active{
                background: #2288dd;
                color: #ffffff;
            } 
           .accordionMenu p{
                margin:  0;
                height: 0;
                overflow: hidden;
                padding: 0 10px; 
               transition:  height 0.5s ease-in;
            } 
           .accordionMenu :target p{
                height: 100px;
                overflow: auto;
            }
            .accordionMenu :target h2:before{
                border-color:  transparent transparent transparent #fff;
            }
        </style>
    </head>
    <body>
        <div class="accordionMenu">
            <div class="menuSection" id="brand">
                <h2><a href="#brand">Brand</a></h2> 
               <p>Lorem    ipsum dolor...</p>
            </div>
        </div>
            <div class="accordionMenu"> 
               <div class="menuSection" id="promition">
                    <h2><a href="#promition">promition</a></h2> 
                   <p>Lorem    ipsum dolor sit amet...</p>
                </div>
            </div>
                <div class="accordionMenu">
                    <div class="menuSection" id="event">
                        <h2><a href="#event">event</a></h2>
                        <p>Lorem    ipsum dolor sit amet...</p>
                    </div>
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

      • 凡西:有几个属性没有用到啊:
        .accordionMenu :target h2:before
        和这个.accordionMenu h2
        eternalshallow:@121cfa1f3f0a 嗯哪, 谢谢指出,我刚刚有运行了一遍,这两个属性确实没有用到, :smile:
        有什么错误,欢迎指出来

      本文标题:目标伪类选择器实现手风琴效果

      本文链接:https://www.haomeiwen.com/subject/slggjttx.html