CSS3 带箭头的手风琴导航栏

CSS Accordion Navigation Bars 使用一组单选框结合伪类（:checked）实现交互效果。简洁实用，不需要JS。

css, tabs

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 17157
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
* {
    margin: 0;
    padding: 0;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    font: 16px/1 'Open Sans', sans-serif;
    color: #555;
    background: #e5e5e5;
}
body {
    padding: 50px;
}
.togglebox {
    width: 400px;
    margin: 0 auto;
    background: #fff;
    transform: translateZ(0);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
input[type="radio"] {
    position: absolute;
    opacity: 0;
}
label {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    border-top: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}
label[for*='1'] {
    border: 0;
}
label:after {
    content: '\f078';
    position: absolute;
    top: 0px;
    right: 20px;
    font-family: fontawesome;
    transform: rotate(90deg);
    transition: 0.3s transform;
}
section {
    height: 0;
    transition: 0.3s all;
    overflow: hidden;
}
#toggle1:checked ~ label[for*='1']:after,
#toggle2:checked ~ label[for*='2']:after,
#toggle3:checked ~ label[for*='3']:after,
#toggle4:checked ~ label[for*='4']:after {
    transform: rotate(0deg);
}
#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
    height: 200px;
}
p {
    margin: 15px 0;
    padding: 0 20px;
    font-size: 12px;
    line-height: 1.5;
}

HTML

<input id="toggle1" type="radio" name="toggle" />
    <label for="toggle1">Pure CSS Accordion</label>

<section id="content1">
        <p>
            Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
        </p>
        <p>
            Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
        </p>
    </section>

<input id="toggle2" type="radio" name="toggle" />
    <label for="toggle2">Pure CSS Accordion</label>

<section id="content2">
        <p>
            Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
        </p>
        <p>
            Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
        </p>
    </section>

<input id="toggle3" type="radio" name="toggle" />
    <label for="toggle3">Pure CSS Accordion</label>

<section id="content3">
        <p>
            Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
        </p>
        <p>
            Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
        </p>
    </section>

<input id="toggle4" type="radio" name="toggle" />
    <label for="toggle4">Pure CSS Accordion</label>

<section id="content4">
        <p>
            Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
        </p>
        <p>
            Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
        </p>
    </section>

</div>

CSS Accordion Navigation Bars 使用一组单选框结合伪类（:checked）实现交互效果。简洁实用，不需要JS。

css, tabs

编辑器支持Emmet

快捷键

CSS Accordion Navigation Bars 使用一组单选框结合伪类（:checked）实现交互效果。简洁实用，不需要JS。

css, tabs

CSS3 手风琴样式的折叠动画

CSS3 带下阴影效果的箭头型提示框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：