Menú CSS con Sprites

Cuando hacemos un sitio web, deberían preocuparnos sus tiempos de carga ya que influyen directamente en el posicionamiento web así como en la fidelización de clientes.

Definición

Un Sprite es una gran imagen que contiene más imágenes pequeñas dentro.

Los sprites comenzaron a utilizarse con los videojuegos 2D, esa gran imagen contenía a los personajes en sus diferentes posiciones y, mediante un algoritmo lograban un efecto de movimiento.

Puedes leer más sobre los sprites en wikipedia.

HTML del menú

Lo primero que vamos a crear es el menú en HTML:

<div id="menu">
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Lore Ipsum</a></li>
		<li><a href="#">Dolor</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

Como veis, es un menú como cualquier otro, nada fuera de lo normal.

El Sprite

El sprite que utilizaremos será este:

Este sprite contiene los fondos para los estados normal y hover.

El CSS

Aquí es quizá donde resida la «magia» de este menú, aunque tampoco es nada del otro mundo:

/*CSS para el menú*/
 
#menu {
	margin:20px;
	width:auto;
	height: auto;
}
 
#menu ul li{
	display: block;
	width: 100px;
}
 
#menu ul li a{
	padding-top: 7px;
	display: block;
	width: 100px;
	height: 21px;
	text-align: center;
 
	color:#fff;
	text-decoration: none;
 
	font-weight: bold;
	text-transform: uppercase;
	background: url(bgMenu.png) no-repeat;
}
 
#menu ul li a:hover{
	background: url(bgMenu.png) no-repeat;
	background-position: 0 -30px;
}

Sólo hay que destacar las líneas del a:hover (las últimas líneas), concretamente la del background-position.

Si te fijas, verás que tanto el estado normal del enlace como el estado hover comparten la misma imagen; la que corresponde con nuestro sprite.

La diferencia reside en que en el estado normal no especificamos una posición xy para la imagen de fondo y en el hover sí.

Concretamente, le estamos diciendo que en el efecto hover nos muestre ese mismo fondo pero a partir de los pixeles 0 (izquierda) y -30px (arriba), por lo que desplazará nuestro fondo 30 pixeles hacia arriba mostrando el efecto hover.

Con esto nos queda un menú CSS de lo más sencillo y evitamos unas cuantas peticiones a nuestro sitio; por cada enlace del menú, de no hacerlo con sprite, haría 2 peticiones (una para el estado normal y otra para el hover) y de esta manera hacemos sólo una petición.

Quizá en un sólo menú no se note mucho la diferencia, pero en un sitio web con muchas imágenes y muchos efectos hover como el de este menú su tiempo de carga sería más rápido.

Ver ejemplo

Descargar menuSpritesCSS v1.0