Come posso creare un menu di fisarmonica con CSS3?

Question

Come posso creare un menu espandibile con solo HTML5 e CSS3?

Desidero visualizzare solo 4 voci di menu e una visualizzazione di tutte le voci dell'elenco, in cui facendo clic su Visualizza tutte dovrebbero espandere tutte le voci dell'elenco.

Answer 1

Ci sono diversi modi per farlo! Ad esempio il seguente. L'HTML è simile a questo. C'è un div che fai clic e un div che si espanderà. Questo è possibile solo con lo pseudo-selettore: 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; 
} 

Ho creato un Fiddle funzionante per te. Dai un'occhiata a questo: Check me out!

Answer 2

È possibile controllare questo fuori: http://thinkphp.github.com/cuba.js/accordion.html fonte: https://github.com/thinkphp/cuba.js evviva!