El objetivo de esta técnica es crear imágenes de sustitución para utilizarlo en menus.Se puede cambiar el color por imagenes reales de fondo con la propiedad background-image: url( );
PASO1
Creamos una lista con los elementos que se mostrarán en el menú y creamos los enlaces (para nuestro ejemplo serán nulos):
PASO2
Crear el juego de imágenes que se utilizará para los efectos. Necesitaremos una imagen para el mostrar en la página y otra que se mostrará únicamente cuando el ratón pase sobre ella.
Aunque podrían utilizarse tamaños diferentes para ambas imágenes es preferible que sean del mismo tamaño para que todo sea más sencillo.
PASO3
Ajustaremos márgenes y rellenos para que la lista quede al borde de la división y eliminaremos los boliches del listado que hay dentro de nuestra división menú, para lo que recurriremos a crear un estilo interno utilizando CSS. (#menu ul)
Pondremos a 0 los valores de márgenes y izquierdos y en la pestaña listas elegiremos none como tipo para estilo de la lista.
PASO4
#menu li que afectará unicamente a
los elementos de lista que se encuentren dentro de la
división menu y le adjudicaremos el valor a la propiedad
Colocaremos ahora una imagen como fondo de cada uno de los enlaces.
Para poder modificarlos posteriormente vamos a tener que crear una clase para cada uno de ellos. Así pues iremos creando una serie de nuevas reglas a las que iremos llamando item1, item2 y así sucesivamente. En este caso estamos creando clases en lugar de identificadores id, por lo que utilizaremos la opción estilo con nombre al crear cada una de las nuevas reglas. Aplicamos un fondo para cada una de las clases.
Una vez que hayamos creado todas las clases las adjudicaremos a cada uno de los elementos de la lista.
PASO6
Vamos ahora a darle un estilo a los enlaces de nuestro menú, para lo que crearemos una nueva regla #menu a que afectará a los enlaces que se hayan creado dentro de nuestro menú. (Hemos estado utilizando este identificador desde el principio pero aún no habíamos definido ninguna regla constyle="text-align: justify;" sus propiedades)
hidden.
Si no lo hiciéramos
así, no nos habría servido de nada el truco de la
altura 0, ya que el contenido que "se sale" del espacio se
mostraría, mientras que ahora queda oculto.PASO7
#menu li que
ya habíamos
creado añadiéndole un
margen derecho de 1
píxel.:hover para
cada uno de los elementos de la lista y adjudicarle
como fondo la imagen en color correspondiente en cada caso.
Además, para garantizar que
siempre se colocará por encima de la imagen en blanco y
negro le daremos también,
un valor 50
para la propiedad z-index
(realmente sería suficiente darle
un valor 2 ya que con ese estaría por encima del valor de
profundidad por defecto).menu dándole, en
las
dimensiones de alto y ancho
que deseemos adjudicarle
en
función de nuestras imágenes y especificando el
valor block para la
propiedad display.El código de nuestra hoja de estilos interna quedaría así:
#menu {display:block; width: 710px; height: 100px;}
#menu ul { list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;}
#menu li { float: left; margin-right:1px;}
.item1 { background-repeat: no-repeat;
background-color: rgb(255,102,102);
}
.item1:hover { background-repeat: no-repeat;
background-color: rgb(255, 159, 102);
z-index:50;}
.item2 { background-repeat: no-repeat;
background-color: rgb(105,102,102);}
.item2:hover { background-repeat: no-repeat;
background-color: rgb(255,255,102);
;
z-index:50;}
.item3 { background-repeat: no-repeat;
background-color: rgb(255,102,255);}
.item3:hover { background-repeat: no-repeat;
background-color: rgb(158,102,102);
z-index:50;}
.item4 { background-repeat: no-repeat;
background-color: rgb(255,142,102);}
.item4:hover { background-repeat: no-repeat;
background-color: rgb(255,182,255);
z-index:50;}
#menu a { display: block;
width: 100px;
padding-top: 66px;
overflow: hidden;
height: 0px;}