Menú CSS con imágenes precargadas (CSS Sprites)

En este tip les mostraré cómo crear un menú hecho sólo a base de imágenes, precargadas (sin javascript) y amigable con los buscadores. Este método se llama CSS Sprites, y lo recomiendo muchísimo a todos porque yo estoy segura que a más de uno le ha pasado que cuando pasan el mouse sobre un menú que es de imágenes o que tiene una imágen de fondo, se debe esperar 1 o 2 segundos a que la imágen del rollover cargue. Eso en lo personal me parece molesto porque interfiere en mi experiencia de usuario; al precargar las imágenes le ofrecemos al usuario una experiencia más placentera. Y más adelante les mostraré cómo este método también es muy útil para Aplicaciones Web cuya presentación es en html/xhtml, así que a los desarrolladores les va a interesar puesto que optimiza la carga de aplicaciones.

Los Sprites

Primero ¿qué son los Sprites? Si dan una búsqueda por Google verán que se trata de una gran imagen que contiene más imágenes pequeñas dentro. Los Sprites eran usados en los videojuegos antiguos de 2D, esos que tenían pocos colores, para tener cargados a sus personajes y mediante sus algoritmos de programación se movían dentro de esta gran imágen y daba como resultado el personaje moviéndose, corriendo, etc. Este es un ejemplo de sprites del famosísimo juego Mario Bros:



Pueden leer mas sobre la definición de sprites en Wikipedia http://es.wikipedia.org/wiki/Sprite_(videojuegos)

Entonces ¿que tienen que ver los sprites con CSS? Bastante, pues les diré que esta antigua técnica nos ayuda a nosotros los diseñadores y/o desarrolladores a optimizar la carga de nuestras páginas web, y se los voy a demostrar con el ejemplo de crear un menú.

Preparando la imágen

Esta es la parte más importante, es lo que nos dará esa precarga de imágenes que queremos.
Volviendo al concepto de Sprites, lo que nos quiere decir es que en una imágen se tienen todas las imágenes que se usarán, para este caso, en una sola imágen tendré todos los estados del menú, el estado normal, el sobre o rollover, y el activo.

La siguiente es la imágen que usaré para mi ejemplo:



La imágen real tiene una dimensión de 702px de ancho x 108px de alto y pesa 9.21KB, la primera sección es el estado normal, la del medio es el rollover y el último es el estado activo, el que me dice en qué sección de la página estoy.

El menú en la página web tendrá solamente 36px de alto, entonces como se habrán dado cuenta si separan cada sección de la imagen, cada una es de 36px de alto, 36*3=108px

Esa es la idea, cuando ustedes empiecen a cortar su diseño, coloquen en un solo archivo todos los estados de su menú.

Hay que tomar nota del ancho para cada botón en esa imágen, yo usé las guías del photoshop y a partir de ahí medí el ancho para cada botón.

Preparando el XHTML

Entonces creamos la clásica lista para nuestro menú.

Código :

<ul class="menuholder">
<li class="menu_intro"><a href="#" title="Introduction" class="active">Introduction</a></li>
<li class="menu_book"><a href="#" title="The Book">The Book</a></li>
<li class="menu_testi"><a href="#" title="Testimonials">Testimonials</a></li>
<li class="menu_what"><a href="#" title="What You Will Get">What You Will Get</a></li>
<li class="menu_buy"><a href="#" title="Buy Now">Buy Now</a></li>
</ul>

Notar que cada link tiene su respectivo atributo title y que se ha mantenido el texto dentro del link <a>, esto es para que sea accesible y amigable con los buscadores.

Es importante que cada <li> llame a una clase distinta, y colocar una clase llamada "active" a la opción del menú que se desea mostrar como activa.

Y bueno como ven la parte del html es la más fácil no hay mucha ciencia, ahora pasaremos a la hoja de estilos.

El CSS

OK, primero asegúrense de tener un Reset en su archivo CSS. Para fines de este tip usaré el siguiente:

Código :

* {margin:0px;padding:0px;}
ul,li {list-style-type:none;}

Ahora vamos a definir ciertos parámetros para la clase "menuholder" que es el <ul> que encierra el menú

Código :

.menuholder {background:url(images/bgmenu.gif) #dd0069;} /*opcional*/
.menuholder li {float:left;}
.menuholder a {background:url(images/menu-options.gif);display:block; height:36px; text-indent:-9000%}

En la primera línea estoy colocándole un fondo fucsia con una pequeñísima imágen de 1px de ancho por 36px de alto. Esto es para que salga de frente un fondo fucsia en mi menú rápido mientras cargan la imágen del menú. Esto es opcionanal pero la considero una buena práctica.

En la segunda línea hago que los elementos <li> dentro de .menuholder tengan float:left para que salgan todos en fila, en una sola línea, ya no como una lista hacia abajo.

En la tercera línea finalmente vemos que todos los links <a> dentro de .menuholder tendán de imágen de fondo menu-options.gif que es nuestra gran imagen con todos los estados. Se le define un display: block para que se le puedan aplicar el ancho y el alto a cada link, lo que sigue justamente es el alto de 36px ya que cada link tiene el mismo alto lo ponemos aquí y el text-indent moverá el texto dentro de los links bien lejos para que no se vean sobre el menú.

Ahora sí viene lo bueno, este es resto del CSS, que se encargará de posicionar la imágen de fondo en cada estado del menú:

Código :

/*ESTADO NORMAL*/
.menu_intro a {width:155px;}
.menu_book a {width:107px; background-position:-155px 0px;}
.menu_testi a {width:134px; background-position:-262px 0px;}
.menu_what a {width:176px; background-position:-396px 0px;}
.menu_buy a {width:130px; background-position:-572px 0px;}

/*ESTADO ROLLOVER*/
.menu_intro a:hover {background-position:0px -36px;}
.menu_book a:hover{background-position:-155px -36px;}
.menu_testi a:hover {background-position:-262px -36px;}
.menu_what a:hover {background-position:-396px -36px;}
.menu_buy a:hover {background-position:-572px -36px;}

/*ESTADO ACTIVO*/
.menu_intro a.active {background-position:0px -72px;}
.menu_book a.active {background-position:-155px -72px;}
.menu_testi a.active {background-position:-262px -72px;}
.menu_what a.active {background-position:-396px -72px;}
.menu_buy a.active {background-position:-572px -72px;}

¿Recuerdan que tomamos nota de los anchos? Bueno aquí es donde se usan, en la primera sección donde están los estados normales, se especifica el ancho de cada link, notar que estoy poniendo el nombre de la clase y luego la etiqueta de link <a>, porque es al link que esta dentro de la clase al que estoy aplicando todas estas definiciónes. Luego juego con la posición del fondo, como ven sólo estoy moviendo las posiciónes horizontales (eje X), en el primero no le especifiqué porque un fondo por defecto esta en la coordenada 0,0 así que no es necesario escribir la posición en este caso en particular.

Para el estado rollover muevo todos los backgrounds en el eje Y a -36px para que pase a la sección media de la imágen donde están todas mis imágenes de rollover, las posiciónes horizontales se mantienen.

Y por ultimo el estado activo, muevo los backgrounds 36px más, es decir -72px en el eje Y para que se puedan ver los estados activos, y nuevamente mantengo los del eje X. Notar que la etiqueta <a> esta definiendo una clase "active" esto se coloca en el link <a> que se desea mostrar activo y en este caso es el primer botón del menú. ¡Y ya está!

Eso es todo, espero que hayan entendido, pueden ver el ejemplo en línea y descargar este ejemplo (notar que no hay retraso al mostrar las imágenes del menú)

Ver ejemplo online

Descargar archivos

Tip para desarrolladores

Este método no se limita solamente a menús en páginas web, esto ayuda bastante en la optimización de aplicaciones web también, ya que evitamos constantes conexiones al servidor cada vez que se necesite un icono, imágen, fondo, etc. Las aplicaciones web utilizan bastantes iconos, les pongo el ejemplo de Yahoo! Mail, ellos usan este método para sus iconos y fondos de los tabs, esta es una pequeñísima parte de la gran imagen que ellos usan para sus iconos, la original es de 3050px de ancho x 101px de alto, y pesa tan sólo 31kb:



Y usan otra gran imágen para el fondo de sus tabs también.

Como ven este método es muy útil, úsenlo sabiamente donde lo vean necesario, especialmente en imágenes estáticas que saben que van a ser llamadas una y otra vez.

Espero que esta información les sirva para proyectos futuros

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.