2009-10-20 11 views
5

Estoy intentando diseñar un menú que tenga una altura estática y el contenido se muestre entre los encabezados. (Consulte la imagen siguiente. ... el lado derecho es la vista después de que un usuario hace clic en Encabezado 2)¿Cómo se llama este estilo de menú?

¿Cómo se llama este estilo de menú? ¿Cómo puedo lograr esto con jQuery?

accordion menu http://i37.tinypic.com/25ztrsx.png

Editar: Gracias! Busqué acordeón antes de preguntar, pero no pude encontrar ningún ejemplo donde la altura del menú permanezca estática independientemente del contenido.

Edición 2: Este es el comportamiento que estaba buscando: Vertical concertina menu Gracias @ricebowl para proporcionar el enlace.

+0

Vale la pena señalar, creo, que se puede conseguir este diseño con sólo XHTML y CSS, sin * necesidad * (a menos que usted quiere) usa jQuery o JS. Ver mi respuesta a continuación. –

+0

Claro, pero por lo general los clientes son exigentes en la actualidad y quieren muy pocos efectos y animaciones, no creo que un html/css súper minimalista lo reduzca para algunos clientes. –

+0

@meder, tienes toda la razón; pero para aquellos dispuestos a vivir con lo básico, es un buen recurso. Pero me gusta hacer que funcione con los conceptos básicos y * realzar * con JS/jQuery. De esa forma, aún se ve bien, aunque no sea básico. =) –

Respuesta

5

Estoy seguro de que sabe, por ahora, que este es el estilo de menú acordeón, sólo voy a sugerir -si usted es susceptible a un no -jQuery option- que visite el sitio web de Stu Nicholl css-play, donde tiene un xhtml/css version puro de este estilo de menú de acordeón.

+0

¡Guau, eso es genial para no usar una sola línea de script! – gn22

+0

¡Gracias por el enlace! Encontré exactamente lo que quería. – Nescio

+1

@Gurdas, he descubierto que el sitio de Stu Nicholl es indispensable a lo largo de los años para aprender cosas nuevas y lidiar con problemas de CSS. Sus juegos CSS, sin embargo, son * puros * increíbles: http://www.cssplay.co.uk/menu/(bajo el encabezado 'Puzzles') =) –

Cuestiones relacionadas