Menú CSS con Sprites

Hoy nos enfocamos en un tutorial para principiantes y no tanto, ya que cuando todos empezamos queremos agregarle a nuestra página un menú con hover y que mejor que hacerlo nosotros mismos. Ademas estaremos usando la técnica Sprites que se usaba comúnmente en los juegos de antes como Mario Bros, que consiste en usar una sola imagen para todo el menú en este caso, asi estaremos ahorrando tiempo “vital” para la carga de la página.

Comencemos con el tutorial.

Como primera medida debemos elegir el estilo que tendrá nuestro menú. En este caso hemos decidido hacer algo sencillo y práctico, pero con este mismo ejemplo podrán lograr hacer menúes del mismo estilo que utilizamos nosotros en la página.

Al ser una Sprite deberán crear en la misma imagen todos los estilos que quieran obtener en su menú (normal, activo, hover). Les enseñaremos aquí a realizar el estado normal y el de hover (mouse sobre el menú).

Esta es la imagen que creamos nosotros, como podrán ver está incluido el estado normal y el de hover como les decíamos más arriba. También verán que esta incluído un fondo, lo colocamos para que se aprecie mejor en un entorno.

Lo que debemos hacer a continuación es calcular las distancias, ya que serán necesarias más adelante cuando estemos realizando el código. Con los recuadros de colores marcamos el ancho de los botones.

Las medidas para la parte que sigue son: 131px 105px 103px 105px 134px de ancho y 38px de altura

Si vas a crear este menú en una página web (HTML o PHP) necesitarás utilizar el Adobe Dreamweaver u otro editor web o simplemente el bloc de notas. Pero si lo vas a implementar en tu WordPress o Joomla basta con el editor nativo del CMS.

Comencemos a dar el estilo:

Todo los nombres de las clases son modificables (palabra después del punto)

Para cambiar el nombre de clase correctamente:
.mi_nombre {propiedades de div}
.mi_nombre a {propiedades de enlace}
.mi_nombre a:hover {propiedades de enlace en hover}

Todo los valores de las alturas y los anchos, márgenes y background-position deben ser modificados por ustedes, dependiendo de las medidas de su sprite.

La background-position es negativa si no es 0px. El primer valor corresponde al eje de las X (posición horizontal) y el segundo al eje de las Y (posición vertical). Es decir, el primer valor indica cuántos pixeles tiene que moverse la posición de la imagen hacia la derecha, y el segundo valor cuántos pixeles hacia abajo.

Los anchos o width que nosotros usamos eran diferentes para cada botón, pero si todos sus botones van a medir lo mismo deben colocar lo siguiente:

Es importante que tengan en cuenta que estas height y width son el alto y el ancho del “block” que se mostrará, no las medidas de la sprite.

Colocación del código:

Coloquen en su documento HTML o PHP o en el editor nativo de CMS el siguiente código, variando las class por el nombre que ustedes decidieron darles en el documento CSS (adjuntado más arriba).

Pueden colocar tantos objetos dentro del menú como necesiten, en este caso utilizamos cinco secciones. Estas secciones deberán corresponderse con un .xxxxx en el documento CSS.

Dentro del código <a href> nosotros colocamos un # pero en ese espacio deben colocar el enlace al que quieren que ese botón dirija.

Scroll to top