如何使用CSS3製作手風琴菜單？

Question

如何創建僅包含HTML5和CSS3的可展開菜單？

我想只顯示4個菜單項目和一個查看所有列表項目，點擊查看全部應該展開所有列表項目。

Answer 1

有幾種方法可以做到！例如以下。 HTML看起來像這樣。有一個div，你點擊，下面的div將會擴展。這隻適用於僞選擇器：目標。

<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 喝彩！