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).

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter