comparte el articulo 

Menú y galería de imágenes tipo slide con CSS y HTML

Actualizado el 28/09/2010 < > 11 Cometarios

Resumen: 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 scripts en 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.

Publicado el 28/09/2010, última actualización 28/09/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

11 Cometarios

  1. Guille

    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 http://www.movistar.es.

    Desde ya te agradezco,
    saludos!

    Jueves, 7 de octubre 2010

  2. erb

    gracias hermano, no te imaginas cual feliz me hace encontrar esto!!!
    te felicito por tus ejemplos..

    Domingo, 24 de octubre 2010

  3. Cari Mora

    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!

    Viernes, 14 de octubre 2011

  4. Verónica Milán

    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!

    Martes, 18 de octubre 2011

  5. jorge

    es mi navegador, o le falto transición?

    Martes, 6 de diciembre 2011

  6. Verónica Milán

    No tiene transición porque no lleva javascript, es un menú desplegable css puro.

    Viernes, 9 de diciembre 2011

  7. Miguel Angel

    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 tenenmos acceso a una educacion formal

    Viernes, 20 de julio 2012

  8. claudia

    bueno super explicado tu ejemplo me sirvio de mucho muchas gracias :)

    Miércoles, 21 de noviembre 2012

  9. Anonimo

    No funciona con Internet Explorer!!! :(

    Miércoles, 19 de diciembre 2012

  10. Ernesto

    Hola!! tengo un problema quiero a ajustar mi baner principal en html5 con css. el baner se ecuentra en la parte superior del menu.

    Miércoles, 25 de noviembre 2015

  11. Fernando

    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

    Martes, 20 de septiembre 2016

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras