html5 – 如何使用CSS3制作手风琴菜单?

前端之家收集整理的这篇文章主要介绍了html5 – 如何使用CSS3制作手风琴菜单?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何创建仅包含HTML5和CSS3的可扩展菜单

我想只显示4个菜单项和一个查看所有列表项,其中点击查看全部应该展开所有列表项.

解决方法

有几种方法可以做到!例如以下内容.
HTML看起来像这样.有一个div,你单击,下面的div将展开.这只能通过伪选择器:target实现.
<div class="accordion">
    <div id="one" class="section">
            <h3>
                    <a href="#one">Heading 1</a>
            </h3>
            <div>
                    <p>Content</p>
            </div>
    </div>
    <div id="two" class="section">
            <h3>
                    <a href="#two">Heading 2</a>
            </h3>
            <div>
                    <p>Content</p>
            </div>
    </div>
</div>​




.accordion h3 + div {
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;
}

.accordion :target h3 + div {
        height: 100px;
}

.accordion .section.large:target h3 + div {
        overflow: auto;
}

我为你做了一个工作小提琴.看看吧:Check me out!

猜你在找的HTML5相关文章