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

问题描述

如何创建仅包含 HTML5 和 CSS3 的可展开菜单?

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

解决方案

有几种方法可以解决！例如以下.HTML 看起来像这样.有一个 div，您单击它，下面的一个 div 将展开.这仅适用于伪选择器 :target.

<div id="one" class="section"><h3><a href="#one">标题 1</a><div><p>内容</p>

<div id="two" class="section"><h3><a href="#two">标题 2</a><div><p>内容</p>

</div>.accordion h3 + div {高度:0；溢出:隐藏；-webkit-transition:高度 0.3s 缓入；-moz-transition:高度 0.3 秒缓入；-o-transition:高度 0.3s 缓入；-ms-transition:高度 0.3s 缓入；过渡:高度 0.3s 缓入；}.accordion :目标 h3 + div {高度:100px；}.accordion .section.large:目标 h3 + div {溢出:自动；}

我为你制作了一个有效的小提琴.看看它:检查我！

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

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.

解决方案

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屋！