如何用CSS3制作手风琴菜单？ [英] How can I make an accordion menu with CSS3?

问题描述

如何创建只包含HTML5和CSS3的可扩展菜单？

How can I create an expandable menu with only HTML5 and CSS3?

我只想显示4个菜单项和查看所有列表项，点击查看全部应扩展所有列表项。

I want to display only 4 menu items and a view all list item, where clicking view all should expand all of the list items.

推荐答案

有几种方法可以做到！例如下面。
HTML看起来像这样。有一个div，你点击，下面的div将展开。这只能使用伪选择器：target。

There are several ways to make it! For example the following. The HTML looks like this. There is a div, that you click and a div underneath that will expand. This is only possible with the pseudo-selector :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;
}

我为你做了一个工作的小提琴。请查看：查看我！

I made a working Fiddle for you. Have a look at it: Check me out!

这篇关于如何用CSS3制作手风琴菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！