codeando.net

Desde ColorZilla nos traen un estupendo generador de gradientes CSS(3):

Disfrutadlo

Uno de los elementos clave en una página web es el menú de navegación. Hay muchos factores que influyen en el diseño de un menú, pero ante todo:

• Debe ser bien visible a primera vista.
• Debe ser claro.
• Ha de estar bien formado y ser accesible.
• Debe cumplir los estándares del W3C.

Bien, para construir nuestro menú, primero crearemos la estructura, usando una lista desordenada (<ul>). Muchos de vosotros direis ¿porqué todo el mundo se empeña en que tengo que utilizar listas para construir un menu? La respuesta es bien sencilla: el XHTML es un lenguaje diseñado para estructurar datos, y un menú no deja de ser una lista de enlaces, por lo que lo más natural sería representarlo como lo que es, una lista.

Como ejemplo real, cogeré una web que desarrollé hace poco, www.almirantelibros.com. Lo primero, como decíamos es crear la estructura del menú:

<ul id="lmenu">
<li id="lmenu1"><span class="selected">Inicio</span></li>
<li id="lmenu2"><a href="http://www.almirantelibros.com/almirante/">Quienes somos</a></li>
<li id="lmenu3"><a href="http://www.almirantelibros.com/coleccion/">La colecci&oacute;n</a></li>
<li id="lmenu4"><a href="http://www.almirantelibros.com/blog/">El Blog</a></li>
<li id="lmenu5"><a href="http://www.almirantelibros.com/noticias/">Noticias</a></li>
<li id="lmenu6"><a href="http://www.almirantelibros.com/contacto/">Contacto</a></li>
</ul>

Esto nos daría como resultado algo parecido a lo siguiente:

• Inicio
  
• Quienes somos
• La colección
• El Blog
• Noticias
• Contacto

Ya tenemos un menú que, aunque completamente funcional, necesita que le demos forma, lo cual haremos a continuación utilizando CSS y una imagen que habremos preparado previamente. Lo primero es preparar la lista para mostrarla de forma horizontal:

ul#lmenu {
padding: 0;
margin: 0;
}
 
ul#lmenu li {
list-style-type: none; /* Eliminamos el punto de los elementos de la lista */
float: left;           /* Con esta línea ya tenemos el menú en horizontal */
height: 38px;          /* Establecemos el alto, para adaptarlo a la imagen */
}

Una vez tenemos el menú en horizontal, cargaremos la imagen del menú, y digo "la imagen" porque utilizaremos una técnica llamada "CSS Sprites" que ya revisaremos a fondo, y que consiste en cargar una sola imagen como si fuera un "mapa" con todas las imágenes que vamos a utilizar, en este caso en el menú:

 Y ahora vamos con el código CSS:

ul#lmenu li a,
ul#lmenu li span {
display: block;                           /* Convertimos los enlaces y el "span" en bloques */
background-image: url(/images/menu.jpg);  /* Les asignamos a todos la misma imagen, así sólo la cargamos una vez */
background-repeat: no-repeat;
text-indent: -24000px;                    /* Escondemos el texto, indentándolo fuera de la página hacia la izquierda */
}
 
/* A continuación, con "background-position" y "width", posicionamos la imagen de fondo para cada elemento del menú */
 
li#lmenu1 a {
background-position: left 1px;
width: 72px;
}
 
li#lmenu1 a:hover {
background-position: left -37px;
}
 
li#lmenu1 span {
background-position: left -75px;
width: 72px;
}
 
li#lmenu2 a {
background-position: -100px 1px;
width: 166px;
}
 
li#lmenu2 a:hover {
background-position: -100px -37px
}
 
li#lmenu2 span {
background-position: -100px -75px;
width: 166px;
}
 
li#lmenu3 a {
background-position: -292px 1px;
width: 105px;
}
 
li#lmenu3 a:hover {
background-position: -292px -37px
}
 
li#lmenu3 span {
background-position: -292px -75px;
width: 105px;
}
 
li#lmenu4 a {
background-position: -423px 1px;
width: 78px;
}
 
li#lmenu4 a:hover {
background-position: -423px -37px
}
 
li#lmenu4 span {
background-position: -423px -75px;
width: 78px;
}
 
li#lmenu5 a {
background-position: -528px 1px;
width: 92px;
}
 
li#lmenu5 a:hover {
background-position: -528px -37px
}
 
li#lmenu5 span {
background-position: -528px -75px;
width: 92px;
}
 
li#lmenu6 a {
background-position: -645px 1px;
width: 105px;
}
 
li#lmenu6 a:hover {
background-position: -645px -37px
}
 
li#lmenu6 span {
background-position: -645px -75px;
width: 105px;
}

Y con esto, ya tenemos terminado el menú, el ejemplo lo teneis en: www.almirantelibros.com