Menú o galería de imágenes con efecto acordeón (horizontal, RWD y sólo con CSS) | Oloblogger Con el código de hoy podremos convertir fácilmente una lista simple de elementos (imágenes y/o enlaces), en un menú tipo acordeón. Este ti...

4 de mayo de 2014

Menú o galería de imágenes con efecto acordeón (horizontal, RWD y sólo con CSS)

Con el código de hoy podremos convertir fácilmente una lista simple de elementos (imágenes y/o enlaces), en un menú tipo acordeón.

Este tipo de menús constan de una serie de pestañas que al hacer hover o clic sobre ellas, permiten ver el contenido que inicialmente está oculto. La peculiaridad es que dicho contenido se visualiza sobre el mismo menú al ensancharse en tamaño suficiente la pestaña pulsada.

El que veremos ahora tiene una disposición horizontal, no necesita ninguna librería JavaScript porque está hecho completamente con CSS y además es adaptable a todos los tamaños de ventana (RWD).


Menú acordeón CSS


¿Y qué es lo fundamental para tener esto? Pues en primer lugar crear la lista en HTML y situar en ella las imágenes. El código para una lista siempre es el mismo, así que la única variación que he incorporado es un encabezado (h4) para el título de las pestañas.

<ul class="acordeon">
<li>
<h4>TITULO</h4>
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</li>
<li>
<h4>TITULO</h4>
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</li>
</ul>

Como veis se trata de una lista sin ninguna historia. La apertura y el cierre general (ul), los elementos de la lista (li) y dentro de cada elemento un encabezado conteniendo texto y una imagen. A las imágenes les he puesto además un enlace para que veáis como sería con ellos, pero podría ir igualmente sin enlaces.

En el código anterior sólo puse dos elementos, pero se pueden añadir los que se quieran (dentro de unos límites razonables por el ancho limitado) simplemente añadiendo nuevos li y su respectivo contenido (h4 e img).


La segunda parte es -también como siempre- la que le dará el estilo necesario a todo esto, el CSS. Es el que viene a continuación y está ajustado para mostrar 5 elementos. Lo he dejado comentado para que podáis personalizarlo sin problemas, pero si queréis practicar modificaciones, también lo he dejado disponible en este Codepen.

/* Ajustes generales */
ul.acordeon * {
font-family: Arial, sans-serif;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
/* Contenedor general */
ul.acordeon {
width: 100%; /* Personalizar ancho total */
overflow: hidden;
padding: 0;
background: #8F2250;
text-align: center;
list-style: none;
font-size: 0;
box-shadow: 0 0 10px #333;
}
/* Cada elemento */
ul.acordeon li {
position: relative;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 10%;
height:0;
padding-bottom: 40%; /* Ratio aspecto imagen = (height*X)/width */
background: #eee;
text-align: center;
box-shadow: -2px 0px 8px #999;
}
/* Títulos pestañas */
ul.acordeon li h4 {
position: relative;
top: 0;
z-index: 1;
margin: 0;
font-size: 18px;
text-align: left;
text-transform: uppercase;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 10% 120%;
-moz-transform-origin: 10% 120%;
transform-origin: 10% 120%;
white-space: nowrap;
}
/* Contenido inicialmente oculto */
ul.acordeon li a, ul.acordeon li img {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 0%;
padding:0;
background: #333;
}
/* Hover: Desplegamos elemento aumentando su ancho */
ul.acordeon li:hover {
width: 60%; /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */
background: #333;
}
/* Hover: Hacemos que el título recupere la horizontal y le ponemos un fondo */
ul.acordeon li:hover h4 {
top: 20px;
padding-left: 10px;
background: rgba(143,34,80,.8);
color: #eee;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
/* Hover: Expandimos el contenido */
ul.acordeon li:hover a, ul.acordeon li:hover a img {
width: 100%;
}
/* Ajustes para resoluciones pequeñas */
@media(max-width:600px) {
ul.acordeon li h4 {
font-size: 12px;
letter-spacing: 1px;
}
}

Con este sistema que propongo, para que las imágenes queden perfectas y se vean completas tendrán que que tener la misma proporción (que no tamaño) entre su alto y su ancho. Esa proporción es la que se indica en el padding-bottom del selector ul.acordeon li en tanto por ciento. Está explicado en los comentarios del código de manera sintética, pero lo amplío.


Para calcular ese porcentaje necesitamos previamente conocer un valor que he llamado X y que se corresponde con el ancho que ocupará la pestaña visible. Este dependerá de cuantos elementos vamos a poner en nuestro menú.

En el ejemplo, al haber 5 elementos y cada uno de ellos ocupar un 10% del total (ver width de ul.acordeon li), necesariamente el espacio máximo disponible para la pestaña desplegada sería un 60% (4 elementos plegados*10% + 1 desplegado por el resto, 60% = total 100%).

Eso es lo que intenta explicar la fórmula /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */

Siguiendo con el ejemplo, ya sabemos que X o el ancho máximo del elemento desplegado será igual a 60. Ahora es cuando nos vamos al selector ul.acordeon li que mencioné antes y calculamos el valor de padding-bottom que nos permitirá ajustar automáticamente la altura de este cacharrito.

Pues como se indica, el cálculo sería /* Ratio aspecto imagen = (height*X)/width */ y como las imágenes que yo he usado son de 900x600 píxeles, el resultado sería 600*60/900 = 40%, lo que veis que indiqué en el CSS.

Si añado imágenes de 450x300 o de 300x200, el resultado hubiera sido el mismo (40%) pues tienen también la misma proporción.

Sinceramente, es más complicado explicarlo que seguir las indicaciones.

Aquí la demo para ver cómo funciona el juguetito, aunque advierto que la transición sale algo más brusca de lo que en realidad es debido al estilo que tengo incluido en mi plantilla. Para verlo bien pasad por el enlace de Codepen que puse antes y que replico al final del post.


  • Yecla

  • Ricote

  • Bullas

  • Jumilla

  • Abanilla




* Ver en Codepen.

* Imágenes para la demo obtenidas de Andando Caravaca, Rutas Vinodespana, Panoramio, Panoramio y Hotel Hyltor.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

51 comentarios :

  1. Hola Oloman.

    Tengo un problema, yo quiero un acordeon vertical, lo intenté varias veces no me sale!!..como seria, por favor me ayuda. Gracias

    ResponderEliminar
    Respuestas
    1. Inmediatemente no, pero tenía previsto hacer la versión vertical algún día. De todas formas en vertical suele ser menos práctico este sistema porque se desplazaría continuamente todo lo que hubiera debajo en la página, por eso me centré en la versión horizontal.

      Eliminar
  2. Saludos Oloman .. Te Pasaste de bueno con este Menu... me gustaria ponerlo en mi blog pero veo que no se donde iria... de todas formas mil Gracias por compartir tus conocimientos en buena hora .. un Abrazo !!!!!!! :)

    ResponderEliminar
    Respuestas
    1. ¿Cómo que dónde? ¿A estas alturas todavía estás así? :)

      El HTML debería ir en un gadget, por ejemplo bajo la cabecera, encima del cuerpo de los posts o debajo.

      El CSS directamente en la plantilla, entre las etiquetas SKIN.

      Eliminar
    2. Disculpa Oloman.. no me supe expresar xd... jejejejeje me refiero es si al ponerlo en un gadget no se saldra de la barra lateral del blog... jejejeje Gracias por tu aclaracion...

      Eliminar
    3. Lo puedes poner sin problemas -cite "gadget" en el comentario anterior- pero dependiendo de la anchura que tengas quizás quede algo pequeño. Funcionar funcionará si es esa la pregunta.

      Eliminar
  3. Hola Olomán, por aquí ando de nuevo a darte un poco la brasa jajaja, que ya sabes que la confianza es muy mala y cuando tengo una duda "existencial" sobre algo de mi blog, vengo al maná jejeje.

    Bueno, al tema. Me preguntaba yo en mis interioridades si sería posible crear algún gadget (o si sabes de alguno), con el que mis visitantes pudieran crear una playlist con los post que quisieran. Ya sabes que tengo los vídeos en autoplay en el blog "Play this music loud" (toma cuña jeje) (no me spamees, no me spamees jajaja) y claro, si se abren todos a la vez es un sin sentido. El caso sería hacer "algo" donde ponerlos y que fueran saltando en el orden que la persona los ponga. Algo así como lo de añadir al carrito y luego te los voy pasando por caja en el orden que quieras jajaja.

    Igual lo que pregunto te parece una chorrada, pero me parecería una opción interesante para el blog y también para otros blogs por el estilo, y claro, quería saber tu opinión sobre el tema.

    Un saludo amiguete y sigue con ese tremendo curro que haces y que tanto nos ayuda a todos.

    eMe

    ResponderEliminar
  4. Que igual ya existe, por eso decía si es una chorrada, nuse...

    ResponderEliminar
    Respuestas
    1. Hola eMe Logar, no sé si existe algo así y parece muy buena idea, pero está complicado (al menos para mí) desarrollar eso. Lo del carrito de compras de la mayoría de sitios requiere de una base de datos (y por tanto de un hosting propio) dónde guardar la elección de cada cual y además, de alguna forma de registro para relacionar las elecciones personales con cada persona. Lo dicho, muy complicado para mí...

      Eliminar
    2. Ok, gracias por responder, estoy contento con el funcionamiento actual, pero siempre estoy pensando en "cosas" que pudieran ser interesantes, pero siendo tan complicado....

      Pues nada, saludos bro y cuídate.

      eMe

      Eliminar
  5. muchas gracias muy bueno me gusta mucho ;)

    ResponderEliminar
  6. Un buen sitio para poner el modelo vertical, dependiendo de lo que haya en su interior, sería el footer. De esta forma no se moverian las entradas ni la sidebar.
    Puede ser práctico para hacer algo tipo slideshare. (Es solo una idea)
    Saludos!!

    ResponderEliminar
    Respuestas
    1. Personalmente no me gusta en horizontal, pero lo dicho... algún día con tiempo intentaré sacarlo en ese formato ;)

      Eliminar
  7. gracias buen aporte me funciona perfecto

    ResponderEliminar
  8. He cambiado un poquito: http://www.grouptips.net gracias!!!

    ResponderEliminar
    Respuestas
    1. :) Para eso son, para que los cambieis a vuestro gusto

      Y ya que hoy he visto dos veces un menú como el tuyo, voy a ver si explico cómo hacerlo ;)

      Eliminar
  9. Una pregunta, no termino de comprender este sistema, quiero la galería en una pagina estática, entonces pego la lista de imágenes en html y luego el CSS como lo había hecho con otro elemento, pero en este caso, lo que es obvio para vos, no interpreta el CSS. Supongo que tengo que agregar alguna instrucción no?

    ResponderEliminar
  10. Cuando digo "lista de imágenes" me refiero a tu código html exacto (antes de personalizar siempre uso el código original primero). Gracias!

    ResponderEliminar
  11. Ahora aparece, agregue style al CSS, sin embargo el álbum misea todos los datos del html, esta vacío, entonces la pregunta es, como hago que el CSS tome los datos de imagen, titulo, etc, que están en la lista del html?

    ResponderEliminar
    Respuestas
    1. Necesitaría verlo Quidam porque me quedan algunas dudas sobre lo que has hecho. Por ejemplo, la primera es ¿pusiste el HTML EXACTAMENTE igual que el de esta entrada? Es que si es así tendrías que incluir una imagen y un enlace dónde pone URL_IMAGE y URL_ENLACE...

      Eliminar
  12. Gracias! Me sirvio de mucho! solo que me dio un problemas no se si puedes ayudarme?

    Mi problema es que ya tengo un menú con background-attachament:fixed y esto que aprendi en tu tutorial lo quiero utilizar como 'Miembros de Nuestra Banda' y cuando el acordion pasa sobre mi menú, (al bajar con el scroll) el acordeon lo cubre...

    No se si me di a entender... y no se como solucionar este problema.. podrias ayudarme?

    Gracias!

    ResponderEliminar
  13. Lo puse en una página, el CSS con etiquetas style, en la computadora se ve, pero en el celular y en el ipad no se recorren ¿Me puedes ayudar?

    ResponderEliminar
    Respuestas
    1. Es que esos son dispositivos táctiles y en ellos el :hover creo que no va. Sólo reaccionarían con clic y para eso habría que rellenar el enlace con una dirección que yo dejé vacía en el ejemplo.

      Eliminar
  14. Hola, muy bueno, una pregunta, será posible que uno de los elementos esté desplegado por defecto, y se retraiga cuando pasamos el cursor sobre alguno de los otros?

    ResponderEliminar
    Respuestas
    1. Se podría, pero con CSS habría que complicar mucho el código, así que lo mejor sería recurrir ya a JavaScript. Con ese lenguaje lo que haríamos sería añadir una clase al elemento sobre el que se pone el puntero, que se quitaría al retirar el mismo. Esa clase sería la que llevaría el estilo que en este ejemplo puse para los elementos con :hover.

      Eliminar
  15. Excelente aplicación y muy sencilla de implementar. Una duda, es posible incluir menús en vez de las imágenes, que reedireccionen a otros enlaces web?

    ResponderEliminar
    Respuestas
    1. No sé si te diste cuenta de que las imágenes en este tipo de menú son precisamente enlaces. Si lo que quieres es que no salga ninguna imagen, entonces sustitúyelas por texto, aunque pienso que no quedará tan vistoso como con ellas. Pon al menos un color o algo así.

      Eliminar
    2. Hola, gracias por todo.
      Lo que quisiera es que solo saliera la imagen, sin link a una web. Si lo quito no sale la foto y aparece una pantalla negra. He quitado esto
      y el posterior
      ¿Qué puedo hacer?

      Eliminar
    3. En ese caso hazlo todo exactamente igual, pero sin quitar el enlace. En lugar de eso pon un enlace vacío sustituyendo la URL_ENLACE por JAVASCRIPT:VOID();

      Eliminar
  16. Buenas tardes, dejo aquí mi pregunta porque no encuentro ninguna entrada reciente más relacionada con mi duda.
    Me ha dejado de aparecer la imagen en miniatura en entradas populares y en el slider de últimas entradas (sólo la de la última entrada que publiqué ayer, en las anteriores sí están). A qué puede ser debido? Gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola Maca. Echa un vistazo a una entrada que publiqué ayer sobre esto un poco después de tu comentario.

      Eliminar
  17. Gracias! lo acabo de ver. Me pongo con ello a ver si lo soluciono. Saludos!

    ResponderEliminar
  18. Saludos nuevamente. El efecto funciona perfectamente en mi página de inicio, pude configurarlo con éxito y está completamente funcional. Pero cuando quiero ponerlo en una "pagina" secuncaria de blogger, directamente no aparece. ¿Debería ubicar el código en otro sector de la plantilla?

    ResponderEliminar
    Respuestas
    1. Hola. No te puedo contestar porque ni sé en qué blog lo pusiste ni, consecuentemente, en qué parte de la plantilla.

      Eliminar
  19. Buenas tardes. Muchas gracias por tus posts. Me gusta mucho esta galería y quisiera insertarla en mi pagina de inicio, no tengo ni idea de como debo hacerlo.
    Lo tengo funcionando tal cual lo has puesto aquí desde un widget.
    Me podrían Ayudar?? Gracias.

    ResponderEliminar
    Respuestas
    1. No sé cual es tu blog, no puedo verlo y sin eso, me resulta casi imposible saber cual es la situación.

      Eliminar
  20. Hola Oloman es que soy un poco nuevo en lo de los Blogs
    ummm podrias hacer el favor decirme como agrego las imagenes es que ya reemplaze "URL_IMAGEN" por el link de la imagen y no me funciona

    ResponderEliminar
  21. Hola ya consegui que funcione pero agregando a un Gaget por que si copio el codigo HTML en la entrada no me funciona me podrias explicar por que no funciona?

    ResponderEliminar
  22. hola oloman.. como puedo publicarlo en una pagina nueva y no en la pagina principal.. intente pegando el codigo html en la pagina pero no me anda

    ResponderEliminar
    Respuestas
    1. Hola. El primer trozo de código es HTLM y ese es el que tienes que poner en la página... en cualquiera. La segunda parte deberá ir en la plantilla, junto con el resto del CSS (entre las etiquetas SKIN).

      Eliminar
  23. Esta muy bueno Oloman, pero tengo un problema parece que el código es el mismo que un menú desplegable de botones para compartir que publicaste hace tiempo y yo los tengo en mi pagina, entonces lo que sucede es que al poner este menú se cruzan los códigos y ambos se dañan, no se si abra alguna manera de tener los 2 sin que de ningún problema, aquí puedes ver mi pagina donde tengo los botones para compartir: http://www.diexti.com

    ResponderEliminar
    Respuestas
    1. Hola Kehu. Puede que ese otro menú que dices usara el mismo nombre de selector (acordeon), así que si quieres usar los dos toma el de esta entrada y sustituye todos los sitios dónde pone esa palabra (acordeo) y sustitúyela por ejemplo por "acordeon2". De esa manera no habrá conflictos.

      Eliminar
    2. Gracias por tu ayuda, en cuanto tenga tiempo voy a probarlo

      Eliminar
  24. Oloman oloman, un cordial saludo para usted, Como hago para descargarlo??..esta interesante el menú y varias cosas que son muy importantes.Gracias..

    ResponderEliminar
    Respuestas
    1. No hay que descargar nada Ferney.
      Simplemente has de poner el primer código dentro de un gadget HTML/JavaScript y el segundo en tu plantilla, en la parte CSS.

      Eliminar
  25. Excelente Oloman, pero por ejemplo para usarlo en un celular o una tablet, necesitariuamos usar alguna libreria como j-query etc..Gracias por compartir tus conocimientos

    ResponderEliminar
    Respuestas
    1. Este tipo de menús funcionarán como enlaces normales y llevarán sin problema a destino en dispositivos táctiles, pero no se apreciará el efecto acordeón. Para eso ya tendría que ser otro tipo de código muy distinto o hacerlo con JavaScript.

      Eliminar
  26. Gracias Oloman por este tutorial. Queda muy bonito y lo único que tuve problemas fué con el enlace imágenes, que al estar en picasa, tienen una dirección muy larga y no funcionaba. Solución: las inserté en un post y copié el enlace y listo. Lo puse en un gadget y se ven pequeñas pero al darle click salen en su tamaño original. lovely.

    ResponderEliminar