如何使用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 喝彩！