「Karel Kuehne」

Karel Kuehne

Karel Kuehne – 德国摄影师

01

02

03

04

05

「Damien Vignaux」

Damien Vignaux

Damien Vignaux – 法国摄影师

01

02

03

04

05

「Monika Koclajda」

Monika Koclajda

Monika Koclajda – 波兰女摄影师

01

02

03

04

05

06

07

08

「Franck Allais」

Franck Allais

Franck Allais – 法国摄影师

01

02

03

04

05

「CSS3手风琴效果」

CSS3Accordion

原文:ACCORDION WITH CSS3

今天,我们将尝试一下使用相邻及一般兄弟选择符和:checked伪类。通过使用隐藏的input和label元素,创建一个以动画形式来打开和关闭内容区域的手风琴效果。

周围有一些仅用CSS实现手风琴效果的变种形式,其中大部分都是使用:target目标伪类来实现的,使用:target的问题是我们不能真的再次关闭内容区域或者多个部分同时打开。通过使用隐藏的复选框,我们可以控制开启和关闭。另外,我们还可以使用单选按钮来控制每次只打开一个部分。

演示demo源码下载

让我们开始吧!

请注意:本教程的结果将只能在支持CSS3属性的浏览器上正常显示。

标记

我们将通过一个例子,使用复选框来使得一个内容部分是默认展开的(需要给input设置checked)。所有都将被包裹在一个class名为ac-container的容器中,对于内容区域的每一个项目,我们将有一个checkbox,一个label以及一个article:


<section class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">About us</label>
        <article class="ac-small">
            <p>Some content... </p>
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="checkbox" checked />
        <label for="ac-2">How we work</label>
        <article class="ac-medium">
            <p>Some content... </p>
        </article>
    </div>
    <div><!--...--></div>
</section>

需要注意的是,我们将要给每个input设置一个ID,然后我们将给label使用for属性,这样当我们点击label时,可以选中该复选框。

每一个article会有一个class,这将帮助我们确定它展开时的高度(理想情况下,我们应该使用”auto”作为展开时的高度值,但不幸的是实际上做不到这点)。

接下来让我们看下样式。

CSS

我将省略所有的前缀,当然你可以在文件中找到他们。

让我们定义手风琴的宽度并把它居中:


.ac-container{
    width: 400px;
    margin: 10px auto 30px auto;
}

下一步,我们将label显示为可点击按钮,并给他们一些平滑渐变的背景。通过使用多重盒阴影,我们将创建一个微妙的边界和内嵌效果。我们还将z-index设置为20,以确保它将显示在内容区域的上面:


.ac-container label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}

当鼠标悬停时,使背景变为白色:


.ac-container label:hover{
    background: #fff;
}

当我们点击一个标签,复选框变为勾选状态,当这种情况发生时,我们需要相应的标签拥有如下的“selected”样式:


.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

正如你所看到的,我们使用相邻兄弟选择器来选中标签,因为它直接挨着类型为复选框的input后面。

我们给悬停效果添加一个小的箭头图标,因此我们只需要添加一个伪类”after”而不必添加不必要的标签。


.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;  
}

对于“selected”的项目,我们想要显示向上的箭头:


.ac-container input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}

因为我们不想看到input显示出来,所以隐藏它们:


.ac-container input{
    display: none;
}

内容区域将有一个0像素的初始化的高度并且内容溢出时隐藏,我们将添加一个过渡效果对于高度和盒阴影,这里添加的过渡将起到关闭项目的作用,我们为选中项目定义另一种过渡效果,所以,我们可以通过这样做来控制这2种行为,正如你所看到的那样,我们将关闭设的比展开快一点:


.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
    transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

接下来设置一些内容的样式:


.ac-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

现在让我们定义三个不同高度的class,这些将成为内容动画的高度:


.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
    height: 230px;
}

如前所述,”自动“高度的做法在这里是最好的选择,但因为我们不能对它进行动画效果,所以需要给过渡效果设置一些高度。

请注意在一些移动浏览器中,点击label可能不会触发相关input的check和focus事件。

演示

Demo1:使用复选框

Demo2:使用单选框

Demo1:使用复选框(默认展开)

就是这样! 希望你喜欢这个教程并且觉得它有用!

原创译文 转载请注明出处
英文原文:原文:ACCORDION WITH CSS3

「Teuku Jody Zulkarnaen」

Teuku Jody Zulkarnaen

Teuku Jody Zulkarnaen – 印度尼西亚摄影师

01

02

03

04

05

「Raphael Guarino」

Raphael Guarino

Raphael Guarino – 德国摄影师

01

02

03

04

05

「Peter Jamus」

Peter Jamus

Peter Jamus – 美国摄影师

01

02

03

04

05

「Lara Jade」

Lara Jade

Lara Jade – 英国女摄影师

01

02

03

04

05

「Matteo Zanvettor」

Matteo Zanvettor

Matteo Zanvettor – 意大利摄影师

01

02

03

04

05