Как я могу сделать аккордеонное меню с CSS3?

Question

Как я могу создать расширяемое меню только с HTML5 и CSS3?

Я хочу отобразить только 4 пункта меню и просмотреть все элементы списка, при щелчке по которым можно просмотреть все элементы списка.

Answer 1

Есть несколько способов сделать это! Например следующее. 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;
}

Я сделал рабочую скрипку для тебя. Посмотрите на это: Проверьте меня!

Answer 2

Вы можете проверить это: http://thinkphp.github.com/cuba.js/accordion.html источник: https://github.com/thinkphp/cuba.js ура!