Menú y galería de imágenes tipo slide con CSS y HTML
(9 votos, promedio: 4,56 de 5)
Cargando...Como conseguir la simulación de un "efecto slide" en menús y galerías de imágenes, solo con CSS y HTML.
En otros artículos hemos visto como se puede simular algunos efectos dinámicos empleando solo CSS y HTML.
En este artículo les proponemos simular un slide de imágenes para un menú vertical u horizontal o para una galería de imágenes. A continuación desarrollaremos el ejemplo con los códigos correspondientes explicados, de forma que se pueda comprender el funcionamiento y aplicarlo en la forma que se crea más conveniente.
Este efecto es más sencillo que los casos mostrados anteriormente, y nos muestra que para conseguir algunos efectos interesantes no es necesario utilizar códigos complejos, emplear JavaScript u otros lenguajes o utilizar animaciones. Basta con conocer los principios básicos de la maquetación y el potencial de las hojas de estilo en cascada y emplear un poco de imaginación.
Mientras preparamos los archivos para que puedan descargarlos y mostrar el ejemplo terminado para que lo puedan ver en funcionamiento, pueden copiar los códigos que se encuentran en el artículo.
Principio de funcionamiento
El principio en el cual está basado este ejemplo, es mucho más simple que en los casos del menú desplegable y la galería de imágenes que hemos descrito en otros artículos, y se basa en el comportamiento de las capas flotantes y la utilización de la pseudoclase :hover.
La pseudoclase :hover se utiliza para modificar los parámetros de un elemento cuando el puntero pasa sobre él. Normalmente se le utiliza para que se modifique un enlace y cambie de color o cambie el subrayado cuando el puntero se posa sobre él. Pero también se pueden modificar otras propiedades, como las dimensiones (width y height, ancho y altura) de una imagen o una capa.
Ejemplo
Puedes ver el ejemplo en funcionamiento aquí: slide con CSS y HTML, y también puedes descargarte los archivos del ejemplo.
Los códigos HTML y CSS
En primer lugar les dejaremos el código HTML:
<html>
<head>
<title>Ejemplo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>
<div id="izquierda">
<ul id="menu">
<li><a href="#"><img src="img/1.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/2.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/3.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/4.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/5.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/6.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/7.jpg" alt="#" title="#" /></a></li>
</ul>
</div>
<div class="derecha">
<ul id="menu2">
<li><a href="#"><img src="img/21.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/22.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/23.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/24.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/25.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/26.jpg" alt="#" title="#" /></a></li>
<li><a href="#"><img src="img/27.jpg" alt="#" title="#" /></a></li>
</ul>
</div>
<div class="derecha">
<ul id="galeria">
<li><img src="img/31.jpg" alt="#" title="#" /></li>
<li><img src="img/32.jpg" alt="#" title="#" /></li>
<li><img src="img/33.jpg" alt="#" title="#" /></li>
<li><img src="img/34.jpg" alt="#" title="#" /></li>
<li><img src="img/35.jpg" alt="#" title="#" /></li>
<li><img src="img/36.jpg" alt="#" title="#" /></li>
<li><img src="img/37.jpg" alt="#" title="#" /></li>
</ul>
</div>
</body>
</html>
A continuación, les damos el código del archivo CSS, que se llamará “estilo.css” y se debe ubicar en el mismo directorio que la página “index.html”. En caso de querer renombrar el archivo o colocarlo dentro de un subdirectorio, como se hace normalmente, se debe modificar la ruta del enlace que se encuentra entre <head> y </head>.
/* CAPAS CONTENEDORAS */
#izquierda {
width: 170px;
float: left;
}
.derecha {
width: 750px;
float: left;
}
/* ELEMENTOS DEL MENU LATERAL */
#menu {
padding:0;
margin:0 auto;
list-style-type:none;
width:160px;
height:312px;
}
#menu li a {
height:30px;
width:160px;
float:left;
border-bottom:2px solid #fff;
overflow: hidden;
}
#menu li a img {
border:0;
}
#menu li a:hover {
height:120px;
}
/* ELEMENTOS DEL MENU SUPERIOR */
#menu2 {
padding:0;
margin:0 auto;
list-style-type:none;
height:120px;
width:354px;
}
#menu2 li a {
width:30px;
height:120px;
float:left;
border-right:2px solid #fff;
overflow: hidden;
}
#menu2 li a img {
border:0;
}
#menu2 li a:hover {
background:#eee;
width:160px;
}
/* ELEMENTOS DE LA GALERIA DE IMAGENES */
#galeria {
padding:0;
margin:40px auto 0 auto;
list-style-type:none;
height:300px;
width:774px;
border:1px solid #888;
}
#galeria li {
width:60px;
height:300px;
float:left;
border-left:2px solid #000;
}
#galeria li img {
height:300px;
width:60px;
border:0;
}
#galeria li:hover {
background:#eee;
width:400px;
}
#galeria li:hover img {
width:400px;
}
Explicación
En primer lugar diremos que el ejemplo se encuentra dividido en tres capas flotantes, una a la izquierda, en forma de columna lateral, donde se ubica el ejemplo de menú vertical. A la derecha, dos capas contienen el menú horizontal y el ejemplo de una galería de imágenes, una arriba y la otra abajo. Las capas utilizadas utilizan un identificador (#izquierda) y una clase (.derecha) y son flotantes a la izquierda.
La capa contenedora
En los menús y la galería se emplea el mismo código con leves modificaciones. En primer lugar, debemos limitar el tamaño de la capa que contiene el menú, que tiene el identificador #menu en el archivo CSS, lo que debe ser bien calculado ya que un error en esto puede originar fallas en el funcionamiento. El ancho de esta capa debe ser el ancho de las imágenes que se utilizarán, que en este caso es de 160 pixeles.
El cálculo debe hacerse en la altura de la capa contenedora. Colocaremos siete imágenes, que en su tamaño plegado tendrán 30 pixeles mas 2 pixeles del borde blanco, es decir, un total de 32 pixeles, y en su tamaño desplegado es de 120. Como el tamaño de la capa debe ser igual al de seis imágenes plegadas y una desplegada, el cálculo que se debe hacer es (6*32) + 120, lo que da un total de 312 pixeles.
Otras propiedades utilizadas son el margen, que en este caso es 0 auto, para que se centre en la capa contenedora; en esta capa también se determina que las listas no tendrán estilo de lista, para que no aparezcan los marcadores de ítems.
Los ítems
En el caso de los menús, cada uno de los ítems de la lista contiene un enlace, por lo que para darles el formato a todos, utilizaremos #menu li a (formato del ítem que contiene un enlace dentro de la capa #menu).
Las propiedades que determinaremos son las de las imágenes contraídas, por lo que la altura será de 30 pixeles. Para que las capas se superpongan y no queden desplegadas (válido solo para los menús, ya que el caso de la galería tiene la diferencia que las imágenes contraídas están redimensionadas), es necesario que los ítems de menú sean flotantes, lo que queda indicado con la propiedad correspondiente.
Para ganar en efecto decorativo, se ha determinado que cada ítem de menú tenga un borde blanco de 2 pixeles. Luego, se determina que todo lo que sobresalga de las dimensiones de la capa quede invisible mediante la propiedad “overflow:hidden”. De no colocarse, todas las imágenes quedarán en su tamaño original.
Imágenes con enlaces
Las imágenes con enlace tienen por defecto un borde azul de 1 pixel, que debe ser eliminado para que el mismo no se vea, utilizando la propiedad “border: 0” en “#menu li a img”, es decir, en las imágenes con enlace en un ítem de menú dentro de la capa “#menu”.
Las imágenes desplegadas
Cuando el puntero pasa o se posa sobre una de las imágenes contraídas, se activa la pseudoclase :hover, que en este caso determina que la altura de la imagen pase de los 30 pixeles a los 120 pixeles, que es la medida real de cada una de las imágenes utilizadas.
El efecto
Cuando una de las imágenes contraídas, desplaza hacia abajo a las capas que se encuentran debajo de ella, excepto la última, que solo completa el espacio disponible en la capa #menu, haciendo que se parezca a un efecto slide rápido.
El menú horizontal
El caso del menú horizontal es igual que el anterior, con la excepción que la capa base, en este caso #menu2, es más ancha que alta, al igual que las dimensiones de las imágenes contraídas, con lo que el desplazamiento forzosamente se realiza hacia la derecha. El cálculo de las dimensiones de la capa #menu2 debe realizarse con el ancho de las imágenes, en lugar de la altura como en el caso anterior. Otra diferencia, es que el borde de la capa contraída está a la izquierda.
La galería de imágenes
La galería de imágenes es igual al ejemplo del menú horizontal (puede hacerse también con desplazamiento vertical), con la excepción de que no contiene enlaces, con lo que el código cambia ligeramente.
14 respuestas
hola buenas noches, usé el código para probarlo y entenderlo y no funciona, las imágenes no las lee. Usé mis imágenes con sus propios nombres, usé tanto png como jpg solo me aparece la pagina con esto “>”
Hola, seguramente ya lo resolviste porque pasó mucho tiempo y es algo sencillo. eso que te estaba pasando seguramente es por copiar el codigo tal y como está. Lo más probable es que el que escribió esto lo haya puesto de esa forma para que el codigo pueda leerse ya que si hubiera escrito el html real hubieran aparecido la galería y no el codigo. Lo que tienes que hacer para que funcione es reemplazar los “<” por “” y los “"” por “””, creo que no me olvido nada mas pero basicamente debes dejar que el texto parezca un HTML. saludos y suerte
Me gusto el efecto, y me gustaría encontrar, mucho más ejemplos de diferentes trucos y efectos para mi página web.
Tengo un problema, este listado me funciono bien, pero debajo de el puse una galeria con jquery(jsliderman) y la sita se pone detrás de esta galeria, agradeceria una solucion por que ya intente de todo y no funciona. gracias
Hola!! tengo un problema quiero a ajustar mi baner principal en html5 con css. el baner se ecuentra en la parte superior del menu.
No funciona con Internet Explorer!!! :(
Super bien explicado, tu ejemplo me sirvió de mucho. Muchas gracias :)
Gracias por este estupendo tutorial, mejor imposible, te agradezco mucho, un saludo desde Colombia.
Gracias por llevar cultura a miles de personas que de una u otra manera no tenemos acceso a una educación formal
es mi navegador, ¿o le faltó transición?
No tiene transición porque no lleva javascript, es un menú desplegable css puro.
Muy buen material, sin embargo tengo una duda que me encantaría que me pudieran aclarar:
Yo tengo un slide con HTML muy parecido a este, son 3 imágenes que se cambian automáticamente, pero lo hacen muy rápido. He revisado el código y la explicación de tu .css y no encuentro una función para darle determinado tiempo (por ejemplo 4 segundos) a cada imagen. Alguien que me oriente?
muchas gracias y saludos!
Cari, por lo que cuentas debes estar usando JavaScript para darle movimiento a tu slide, posiblemente jquery… deberías buscar en el código JavaScript, no en el CSS.
Saludos!
Gracias hermano, no te imaginas cual feliz me hace encontrar esto!!!
Te felicito por tus ejemplos.
Excelente hermano, mas claro imposible. Me volví loco buscando algo como esto.
Solo te hago una consultilla, es posible hacer con html y css un slide de este tipo, pero en el que las imagenes se desplacen solas? ese tipo de slide tan famoso y de moda como en movistar.
Desde ya te agradezco,
saludos!