Как сделать меню аккордеона с помощью 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; 
} 

Я сделал для вас рабочий скрипт. Посмотрите на него: Check me out!

Answer 2

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