Deprecated: Assigning the return value of new by reference is deprecated in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/post-series/post-series.php on line 841 Notice: is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.) in /home/summarg/domains/summarg.com/public_html/wp-includes/functions.php on line 3245 Crear un menu con CSS Sprite | SummArg

SummArg | Cursos y recursos para webmasters

03/12/2010

Crear un menu con CSS Sprite

La técnica de CSS Sprite consiste en utilizar un único archivo de imagen que contenga todas las imagenes que iremos a utilizar en si mismo. De este modo economizamos en el tiempo de carga de una página entre otras cosas.

En este caso el tutorial de Zach Dunn nos orienta sobre como llegar a un menú cuyos elementos se vean diferente dependiendo del estado:

La construcción de este tipo de menues se divide en tres partes: La elaboración de la imagen con todos los estados, el HTML y el CSS. Comenzando por el primer item diremos que se recomienda hacer uso de las reglas y las guías en Photoshop para ayudarnos a medir cada botón. También es indispensable obtener las posiciones de cada uno, puesto que para la técnica de CSS Sprites se debe insertar esta información para que el truco funcione.

Entre etiquetas <body> dentro de nuestro HTML colocaremos el marcado para nuestro menú:

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>

Muy simple, no? Todo el funcionamiento de este menú radica en el CSS.

/* Everything CSS Sprite Menu */
 ul#menu{margin:0; padding:0; list-style:none; clear:both;}
 #menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
 #menu li a{background:url('images/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}
 /* Home Button */
 #menu li.home{width:115px; height:60px;}
 #menu li.home a{background-position:-5px -5px;}
 #menu li.home a:hover{background-position:-5px -75px;}
 #menu li.home a.selected{background-position:-5px -145px;}
 /* About Button */
 #menu li.about{width:120px; height:60px;}
 #menu li.about a{background-position:-125px -5px;}
 #menu li.about a:hover{background-position:-125px -75px;}
 #menu li.about a.selected{background-position:-125px -145px;}
 /* Contact Button */
 #menu li.contact{width:160px; height:60px;}
 #menu li.contact a{background-position:-250px -5px;}
 #menu li.contact a:hover{background-position:-250px -75px;}
 #menu li.contact a.selected{background-position:-250px -145px;}

Para explicarlo simple, podemos decir que #menu li.contact establece las dimensiones del elemento, y las tres propiedades que le siguen las posiciones de la imagen general que contienen las imagenes en particular:

Pueden descargar los archivos del menu desde el sitio del autor y ver el demo en este otro sitio.

Dejar un comentario