CSS3 ile akordeon menüsünü nasıl yapabilirim?

Question

Yalnızca HTML5 ve CSS3 ile genişletilebilir bir menü nasıl oluşturabilirim?

Yalnızca 4 menü öğesini görüntülemek ve tüm liste öğelerini görüntülemek istiyorum; bu durumda, tümünü görüntülendiğinde tüm liste öğelerini genişletmesi gerekir.

Answer 1

Bunu yapmanın birkaç yolu vardır! Örneğin, aşağıdaki. HTML böyle görünüyor. Bir div var, tıklıyorsunuz ve altındaki bir div genişleyecektir. Bu sadece sahte seçici ile mümkündür: hedef.

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

Sizin için çalışma Fiddle yaptım. ona bir göz atın: Bunu kontrol edebilirsiniz Check me out!

Answer 2

: http://thinkphp.github.com/cuba.js/accordion.html kaynak: https://github.com/thinkphp/cuba.js alkış!