Vamos a explicar como crear un menú utilizando la técnica de los sprites. Esto consiste en tener una gran imagen con todos los Ãtems y estados de los botones del menú y mediante CSS ir desplazando esta gran imagen dejando solo visible la parte que nos interese.
Porque es importante utilizar los sprites? Considera el menú de esta web, como puedes ver consiste de cinco Ãtems y cada uno de ellos tiene cuatro estados. La imagen de reposo, la que aparece al pasar el cursor por encima, la que aparece al hacer click sobre ella y finalmente la activa.
PodrÃamos generar el menú creando cuatro imágenes para cada Ãtem e irlas intercambiando en función del estado lo que resultarÃa en un total de cinco Ãtems x cuatro estados = 20 imágenes, esto afecta claramente a los tiempos de carga de la página. Posiblemente el tamaño en kb de la imagen total con todo sea aproximadamente igual al de la suma de las 20 imágenes por separado por lo que no afectarÃa al tiempo de carga pero en lo que si se ve afectado este último es en el número de peticiones efectuadas por el navegador. Cada petición de imagen implica un retardo entre que se realiza y se obtiene esta finalmente, por lo que como puedes ver, hay una diferencia sustancial entre solicitar veinte o solamente una.
Bien, el menú consta de cinco elementos, con un ancho de 100px cada uno de ellos y la altura de este es de 60px. Por lo tanto generaremos una imagen de 500px x 240px para contener todos los elementos de nuestro menú.
Las cuatro hileras corresponden una, a cada estado del menú. Los primeros 60px verticales son el estado de reposo. Del 60px al 120px muestran el Ãtem al pasar el ratón por encima, de los 120px a 180px el estado al hacer click y los últimos 60px corresponden al estado actual o activo del menú (en la página donde nos encontramos). La técnica como comentaba antes consiste en crear una lista desordenada de 5 elementos (ul) en nuestro html de 100px x 60px cada uno y utilizar la imagen como fondo (background) e irla desplazando mediante CSS para que solo aparezca visible la parte en cuestión.
El html:
<div id="menu">
<ul id="Navegacion">
<li id="navQue"><a href="index.html">que hacemos</a></li>
<li id="navTe"><a href="te.html">te ofrecemos</a></li>
<li id="navComo"><a href="como.html">como trabajamos</a></li>
<li id="navVen"><a href="ven.html">ven contacta</a></li>
<li id="navAqui"><a href="aqui.html">aquà blogueamos</a></li>
</ul>
</div>
EL CSS para el contenedor:
#menu { width:500px; height:60px; }
#menu #Navegacion { width:500px; height:60px; margin:0; padding:0;background:url('menu-sprite-cast.jpg') 0 0 no-repeat; }
#menu #Navegacion li { display:inline; }
#menu #Navegacion li a { background-image:url('images/menu-sprite-cast.jpg') no-repeat; float:left; outline:none; width:100px; height:0; padding-top:60px; overflow:hidden; }Creamos un contenedor en un div llamado menu con el ancho y altura de nuestro menú (puedes evitarte este paso dependiendo de la estructura de tu layout) e identificamos nuestra lista desordenada como Navegacion aplicandole las mismas dimensiones. En este punto definimos como imagen de fondo nuestro sprite.
Es en el momento de definir las propiedades del link de cada Ãtem del menú (li a) donde acotamos que dimensiones tiene cada elemento de nuestro menú (100px x 60px)
EL CSS para generar el sprite:
/* Nav a */
#menu #Navegacion li#navQue a { background-position: 0 0; }
#menu #Navegacion li#navTe a { background-position: -100px 0; }
#menu #Navegacion li#navComo a { background-position: -200px 0; }
#menu #Navegacion li#navVen a { background-position: -300px 0; }
#menu #Navegacion li#navAqui a { background-position: -400px 0; }Definimos la posición de la imagen completa para cada elemento del menú, fÃjate que el ancho de cada uno de ellos es de 100px, por lo tanto vamos desplazando 100px negativos a cada elemento. Con ello vamos colocando cinco veces la imagen completa dejando solo visible la porción que nos interesa.
/* Nav a:encima */
#menu #Navegacion li#navQue a:hover { background-position: 0 -60px; }
#menu #Navegacion li#navTe a:hover { background-position: -100px -60px; }
#menu #Navegacion li#navComo a:hover { background-position: -200px -60px; }
#menu #Navegacion li#navVen a:hover { background-position: -300px -60px; }
#menu #Navegacion li#navAqui a:hover { background-position: -400px -60px; }En este paso aplicamos los desplazamiento para el estado hover (al pasar el puntero del ratón por encima). En esta ocasión, además de desplazar 100px horizontales a cada elemento necesitamos desplazar -60px verticales también a cada uno de ellos, recuerda, la segunda hilera de elementos.
Creo que a estas alturas y aun sin estar familiarizado con CSS ya has comprendido la técnica utilizada. Sin más el resto del CSS:
/* Nav a:activo */
#menu #Navegacion li#navQue a:active { background-position: 0 -120px; }
#menu #Navegacion li#navTe a:active { background-position: -100px -120px; }
#menu #Navegacion li#navComo a:active { background-position: -200px -120px; }
#menu #Navegacion li#navVen a:active { background-position: -300px -120px; }
#menu #Navegacion li#navAqui a:active { background-position: -400px -120px; }
/* Nav elemento actual */
body#hacemos #Navegacion li#navQue a { background-position: 0 -180px; }
body#ofrecemos #Navegacion li#navTe a { background-position: -100px -180px; }
body#trabajamos #Navegacion li#navComo a { background-position: -200px -180px; }
body#contacta #Navegacion li#navVen a { background-position: -300px -180px; }
body#blogueamos #Navegacion li#navAqui a { background-position: -400px -180px; }Hemos definido el sprite para los estados activo y actual. Para este último he aplicado el estilo al ‘body‘, es una buena práctica aplicar un identificador al body de cada una de nuestras páginas. Con esto aplica el efecto según en que página se encuentre. Hay otras muchas maneras de hacer esto mismo, si conoces alguna puedes comentarla a todos.
Por último, dejo unos archivos fuente para que puedas investigar el funcionamiento, en el ZIP encontraras el HTML el CSS y la imagen con el sprite.
Construir un menu con sprites (255)
