Menú gráfico con efecto zoom | Oloblogger Esta sería una de las muchas maneras con las que podemos construir un menú con imágenes que lleva in...

31 de julio de 2012

Menú gráfico con efecto zoom

Esta sería una de las muchas maneras con las que podemos construir un menú con imágenes que lleva incorporado un efecto zoom (fish eye, ojo de pez).

Los distintos elementos se dispondrán en una lista que contendrá las distintas imágenes y sus respectivos enlaces. Dentro de cada enlace incluiremos de manera adicional un span con un pequeño texto que acompañará a cada uno de ellos.

En este caso el texto permanecerá inicialmente oculto y al hacer hover en cualquiera de las miniaturas, será cuando estas se agranden hasta su tamaño original y simultáneamente aparece el texto en su base. Se supone que este texto será el alusivo al destino, pero puede ser utilizado para cualquier otro fin.

El resultado sería algo como esto:



Para conseguirlo habrá que generar algo de CSS a incluir en nuestra plantilla (entre las etiquetas SKIN en el caso de Blogger) y un HTML con determinada estructura.

Esta es la parte de estilo y he añadido directamente en el código unos comentarios que intentan explicar que hace cada parte:

/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}


Y este sería el HTML. Como he comentado al principio sólo se trata de una lista ordenada de imágenes con enlaces y un span añadido dentro de estos últimos:

<div class="expandir">
<ul>
<li><a href="URL_Destino1"><img src="IMAGEN1"/><span>TEXTO1</span></a></li>
<li><a href="URL_Destino2"><img src="IMAGEN2"/><span>TEXTO2</span></a></li>
<li><a href="URL_Destino3"><img src="IMAGEN3"/><span>TEXTO3</span></a></li>
</ul>
</div>


Otro ejemplo a modo de galería de imágenes:


¿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

24 comentarios :

  1. Genial Oloman gracias por el truco,ya se me ocurren varias ideas para darle uso a tan magnifico truco..

    Saludos.

    ResponderEliminar
  2. Si quisieras hacerlo verticalmente como en esta pagina, que están los iconos de facebook, twitter, etc colocados en una columna, como tendrías que modificarlo?

    ResponderEliminar
    Respuestas
    1. Cambia los valores de WIDTH y HEIGHT de la clase .expandir para que el contenedor sea más estrecho. Por ejemplo, el primero con 32px y el alto con lo necesario según el número de imágenes que utilices (unos 320 para 10).

      Eliminar
    2. y esto también habría que cambiarlo?

      /* Las imágenes irán en forma de lista */
      .expandir ul {
      padding-top:10px;
      margin-left:10px;
      }
      /* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
      .expandir ul li {
      float:left;
      list-style-type:none;



      Otra pregunta como hago para que los nombres de los iconos aparezcan arriba de los iconos y no abajo como están ahora.

      Eliminar
    3. Ah y otra pregunta (perdon por molestar tanto) como haría para combinar el zoom de los iconos (recuerda bastante al menu dock) con los botones para moverse entre las entradas antiguas y nuevas
      ?

      Eliminar
    4. Por partes, como Jack...

      Para colocarlos en una única columna sería suficiente con cambiar lo que te comenté. Al menos en mi pruebas funcionó. De todas maneras, yo en tu caso lo probaría y luego modificaría cosas a ver qué pasa. Es una manera de aprender y entretenerse al mismo tiempo ;)

      Para que los nombres aparezcan arriba simplemente retoca la parte HTML redactando los SPAN antes del IMG. Justo al revés de como están en el ejemplo.

      Para lo último prueba esto (sin garantías):
      .home-link, .blog-pager-older-link a img, .blog-pager-newer-link img {
      width: 30px;
      transition: all .3s ease-in;
      }
      .home-link, .blog-pager-older-link a:hover img, .blog-pager-newer-link img {
      width: 50px;
      transition: all .3s ease-in;
      }

      Eliminar
    5. Donde tendría que probar ese código?

      y no se como poner parte HTML del codigo de arriba dentro de la plantilla para juntarlo con los botones de entradas antiguas y nuevas.

      Eliminar
    6. No es HTML, sino CSS. Sólo tienes que añadir eso antes del cierre del SKIN, que es dónde va en Blogger el estilo (CSS).

      Eliminar
    7. Jaja tenes razon, es CSS.
      Pues no, no funciono.

      Eliminar
    8. Perdón se me olvidó que son ID y no clases y además me comí algunos enlaces. Prueba esto en Chrome. Si pita ya tendrás que poner los kits de compatibilidad de los otros navegadores habituales:

      #home-link a img, #blog-pager-older-link a img, #blog-pager-newer-link img {
      width: 30px;
      transition: all .3s ease-in;
      }
      #home-link a:hover img, #blog-pager-older-link a:hover img, #blog-pager-newer-link a:hover img {
      width: 50px;
      transition: all .3s ease-in;
      }

      Eliminar
  3. Es una gran herramienta Oloman :D

    La estoy aplicando a una nueva plantilla que estoy trabajando y funciona muy bien, pero los botones no se me quedan tan juntos como el primer ejemplo que has puesto.

    ¿Hay algo que pueda hacer para que estén más próximos? :)

    Este es el blog en cuestión: http://venuraland.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Me respondo a mi mismo para decir que se me han juntado todos los iconos solos :D ♥

      Gracias Oloman, no sé qué haría sin tu Blog :)

      Eliminar
    2. Pues seguramente lo mismo ;)

      Eliminar
  4. Alguna forma de que quede como menu flotante?

    Saludos

    ResponderEliminar
    Respuestas
    1. Supongo que si metes todos dentro de otro DIV que incluya un STYLE="POSITION:FIXED;TOP:50PX;LEFT:50PX;", debería funcionar como quieres.

      Eliminar
  5. No puedo :/
    No me sale por mas que lo intento y reviso los codigos...
    La imagen se agranda, está con el tamaño que yo quiero... pero el texto que se supone tiene que aparecer cuando la imagen se agranda está visible al lado de la imagen :/
    Ayuda porfavor! :(

    ResponderEliminar
    Respuestas
    1. Si está entre etiquetas SPAN y todo dentro del enlace, sólo se debería ver al hacer HOVER ¿Puedes montarlo en alguna página y me pasas luego la dirección que lo vea?

      Eliminar
  6. Guau, este efecto queda espectacular.
    Me preguntaba si podría usarse para el apartado "Compartir" de las entradas, que por mucho que intento no logro maquillar (y qué feo es).
    ¡Gracias por la explicación!

    ResponderEliminar
  7. Buenas excelente ya tengo el menu grafico; una preguntica en cuanto al Codigo HTML das esta etiqueta a href="URL_Destino1".. Yo en el a href coloque esta
    a href="http://www.google.co.ve/"
    cuando le doy click al Icono de google si me envia pero no abriendome otra ventana sino q se carga en mi index cmo haría pra abrirla aparte????

    ResponderEliminar
  8. Estimado Oloman...

    Me has salvado de muchos problemas en mi blog, y en esta ocasión quería pedirte si puedes ayudarme acerca del plugin jquery cloud-zoom. En mi blog uso la versión 1.0.2 y actualmente existe la versión 3.1, el tema es que no se como podría hacer para reemplazarla por la nueva ya que sería muy importante poder ampliar las imágenes.

    Podrías darme (otra vez) una ayuda?. Gracias
    Mi blog es: qtdpremama.blogspot.com

    ResponderEliminar
    Respuestas
    1. Nunca he visto ese plugin, así que no sé cómo funciona y supongo que ya sabes que por aquí sólo explico cosas generales sobre lo que voy probando. Lo siento.

      Eliminar
  9. Como siempre, compartes grandes conocimientos! ...Gracias, Oloman!

    ResponderEliminar