Tutorial : Como crear menu horizontal css estilo windows vista

Hace unos dias que me estaba paseando por la web vi algunos menus muy atractivos visualmente pero que dejaban mucho que desear en la manera en la que se implemento el codigo, y eso que eran de esos menus de pago en las que te dan opciones de personalizacion y demas.

Bueno el que mas me llamo la atencion fue uno que tenia ese look estilo windows vista tan vistozo, pero por ningun lado encontre un tutorial para darle el look estilo vista, asi que me anime a hacerlo yo mismo y para ello use mi freworks para el diseño de las imagenes de fondo y el dreamweaver para el xhtml y el css auqnue pueden usar cualquier otro editor.

Ahora si manos a la obra :

Lo primero que hay que hacer es definir el html, en mi caso use un div para enmarcar todo el menu pero lo pueden hacer de otra forma si gustan, aunque tambien tendran que retocar un poquito el css

<div id="menu">
<ul>
<li><a href="#"><span>Anchor Text</span></a></li>
<li><a href="#"><span>Mas Anchor Text</span></a></li>
<li><a href="#"><span>Super super anchor text</span></a></li>
<li><a href="#"><span>Anchor Text</span></a></li>
<li><a href="#"><span>Anchor</span></a></li>
</ul>
</div>

Ahora un poco de estilo a la estructura

#menu ul {
padding: 0px;
margin: 0px;
background: url(bgmenu.png) repeat-x;
font-size: 14px;
font-weight: bold;
width: 100%;
float: left;
font-family:"Trebuchet MS", Tahoma, Verdana, Helvetica, Arial;
}

Como se puede apreciar llamo a una imagen de fondo para el menu, la clasica barrita que ocupa todo el ancho del menu. Para esto ya habia preparado las imagenes a usar en éste menu :

la imagen de fondo bgmenu.png (300x34)px

y aqui la imagen a usar en los botones button.png (300x68)px

Descuiden que hay el tutorial de como crear botones estilo windows vista en fireworks

Bueno continuando con el menu ahora tenemos que hacer que los elementos <li> se muestren en linea

#menu ul li {
display: inline;
}

Ahora viene la parte mas entretenida, la de animar el menu con el efecto del rollover utilizando el pseudo-selector :hover del elemento <a>.

Primero debemos especificar las propiedades para el estado de reposo del boton

#menu ul li a:link, #menu ul li a:visited {
background: url(button.png) left top no-repeat;
color: #6FF;
padding-left:35px;
float: left;
text-decoration: none;
display:block;
margin:0 5px;
}

En este caso se va a usar una imagen para ambos estados (reposo y activo) y para los elementos <a> y <span>. He visto en otros tutoriales que suelen hacer el corte de la imagen para el <span> y el <a> pero a mi juicio no es recomendable ya que se hace la carga de dos imagenes al server y la suma de los kb de las imagenes generadas por lo general es mayor a si generasemos solo una y la aplicanos de forma correcta con css.

Como se puede apreciar he aplicado un padding-left de 35px ya que en el background estoy especificando que cuadre la imagen de la parte superior izquierda, para que el efecto uniforme del boton se mantenga debo tener en cuenta a partir de que punto se inicia la zona de repeticion de la imagen de fondo, en este caso este se da a los 30px de modo que el padding-left y padding-right no deben ser inferiores a estos valores porque de lo contrario se distinguiria el punto de corte por la falta de uniformidad de la imagen.

Ahora hacemos lo mismo por derecha con el <span>.

#menu ul li a span{
padding:5px 35px 5px 0;
line-height:24px;
display:block;
background: url(button.png) right top no-repeat;
}

Aplicamos un padding arriba y abajo de 5px, a la derecha 35px y a la izquierda cero, para que el padding top y bottom funcionen correctamente debemos definir el elemento como bloque y ya que el alto de la imagen es de 34px, aplicamos esos 24px faltantes al line-height y porsupuesto definimos el background a que se alinie desde arriba y por derecha evitando que se repita con un no-repeat.

Y ahora viene la decoracion del a:hover

#menu ul li a:hover, #menu ul li a:active{
color: #FFF;
background: url(button.png) left bottom no-repeat;
}

Aplicamos un color mas resaltante definimos el mismo fondo pero esta vez lo tomamos de la base, para este caso en particular debido a que hay solo dos estados basta con top y bottom, pero si se desea trabajar con mas estados siempre se puede definir el punto desde donde empezar a graficar el fondo.

Ahora hacemos lo respectivo con el <span>

#menu ul li a:hover span, #menu ul li a:active span{
background: url(button.png) right bottom no-repeat;
}

Aplicamos el mismo fondo pero lo tomamos de la base.

Ahora si ya podemos ver el resultado final, se pueden descargar el zip con todo desde aqui si gustan.

Actualizacion 2011-09-23

Bueno, a peticion de ustedes aqui les dejo el menu centrado, misma estructura html, y solo algunos retoques al css