2012-03-15 15 views
5

¿Cómo puedo crear un menú expandible solo con HTML5 y CSS3?¿Cómo puedo hacer un menú de acordeón con CSS3?

Quiero mostrar solo 4 elementos de menú y una vista de todo el elemento de la lista, donde al hacer clic en Ver todo se deben expandir todos los elementos de la lista.

+0

¿Te gusta un menú desplegable? –

+0

No es exactamente un menú desplegable, sino un menú de acordeón. – hkasera

Respuesta

7

¡Hay varias formas de hacerlo! Por ejemplo, lo siguiente. El HTML tiene este aspecto. Hay un div, que hace clic y un div debajo que se expandirá. Esto solo es posible con el pseudo-selector: objetivo.

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

He hecho un violín de trabajo para usted. Tener una mirada en ella: Check me out!

+2

¡Muchas gracias! Obtuve lo que quería ... – hkasera

Cuestiones relacionadas