Làm cách nào để tạo menu accordion với CSS3?

Question

Làm cách nào để tạo trình đơn có thể mở rộng chỉ với HTML5 và CSS3?

Tôi muốn chỉ hiển thị 4 mục menu và chế độ xem tất cả mục danh sách, trong đó nhấp vào xem tất cả sẽ mở rộng tất cả các mục trong danh sách.

Answer 1

Có một số cách để thực hiện! Ví dụ như sau. HTML trông như thế này. Có một div, bạn bấm và một div bên dưới sẽ mở rộng. Điều này chỉ có thể với bộ chọn giả: mục tiêu.

<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; 
} 

Tôi đã thực hiện Fiddle đang hoạt động cho bạn. Có một cái nhìn vào nó: Check me out!

Answer 2

Bạn có thể kiểm tra này: http://thinkphp.github.com/cuba.js/accordion.html nguồn: https://github.com/thinkphp/cuba.js cheers!