Menu con imagenes

Revisando los menús de CssPlay he visto este con imágenes que me ha gustado mucho.
Podéis ver como funciona en esa misma página, es el número 15.

(Pincha en la imagen para verla a mayor tamaño)

He armado el CSS necesario con las imágenes (están subidas en ImageShack) para que solo tengáis que copiar y pegar el código y luego armar el menú con vuestros propios datos.

[1] Colocamos este código en el CSS de nuestra plantilla, siempre antes de ]]></b:skin>:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_15 */
.preload15
{background: url(http://img169.imageshack.us/img169/6923/pro151ns5.gif);
}
.pro15 {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:30px;
background:#1841c8 url(http://img147.imageshack.us/img147/1695/pro150ky7.gif);
}
.pro15 li {
float:left;
}
.pro15 li a {
display:block;
float:left;
height:30px;
line-height:30px; background:url(http://img147.imageshack.us/img147/1695/pro150ky7.gif); color:#ddd;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
cursor:pointer;
font-size:11px;
}
.pro15 li a b {
float:left;
display:block; background:url(http://img147.imageshack.us/img147/1695/pro150ky7.gif) right top;
padding:0 16px 0 8px;
color:#ddd;
}
.pro15 li.current a {
color:#fff;
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif);
}
.pro15 li.current a b {
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif) no-repeat right top;
color:#fff;
}
.pro15 li a:hover {
color:#fff;
background: url(http://img169.imageshack.us/img169/6923/pro151ns5.gif);
}
.pro15 li a:hover b {background:url(http://img169.imageshack.us/img169/6923/pro151ns5.gif) no-repeat right top; color:#fff;
}
.pro15 li.current a:hover {
color:#fff;
background: url(http://img248.imageshack.us/img248/4412/pro152xg1.gif);
cursor:default;
}
.pro15 li.current a:hover b {
background:url(http://img248.imageshack.us/img248/4412/pro152xg1.gif) no-repeat right top;
color:#fff;
}
.pro15 li a em {
display:block;
float:left;
width:16px; height:30px;
}
.pro15 li a em.home {
background:url(http://img147.imageshack.us/img147/3286/home2yr5.gif) no-repeat center center;
}
.pro15 li a em.calendar {
background:url(http://img248.imageshack.us/img248/2245/eventstw4.gif) no-repeat center center;
}
.pro15 li a em.camera {
background:url(http://img147.imageshack.us/img147/2013/camerajc9.gif) no-repeat center center;
}
.pro15 li a em.find {
background:url(http://img147.imageshack.us/img147/3066/findou5.gif) no-repeat center center;
}
.pro15 li a em.contact {
background:url(http://img248.imageshack.us/img248/7778/contactqj3.gif) no-repeat center center;
}
.pro15 li a em.search {
background:url(http://img248.imageshack.us/img248/5774/searchnp0.gif) no-repeat center center;
}

[2] Una vez guardados los cambios, en la parte de "Diseño" de nuestra plantilla, añadimos un nuevo elemento HTML y colocamos dentro el código para armar el menú, luego podemos arrastrarlo a debajo de la cabecera:

<ul class="pro15">
<li><a href="#">Inicio</a></li>
<li class="current"><a href="#nogo">Archivo</a></li>
<li><a href="#">Imagenes</a></li>
<li><a href="#">Paginas amigas</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Buscador</a></li>
</ul>

En <a href="> colocamos la url de nuestros enlaces, sustituyendo al #.
Podemos cambiar las imágenes de las pestañas por unas propias, siempre que sean de 16x16 pixeles, no será difícil identificar cada imagen, ya que si nos fijamos en su url, vemos que por su nombre (aunque en inglés) es fácil saber cual es cual.
Lo que no deberíamos cambiar es la clase, es decir, donde vemos em class="home", por ejemplo, ya que si lo hacemos el menú no funcionará.

AVISO:

Algunas imágenes han sido borradas de ImageShack y el menú se verá imcompleto, podéis descargar aqui el pack con las imágenes y subirlas a vuestro propio alojamiento para evitar este tipo de problemas.

ElHackerZ