Este es un sencillo menú hecho en photoshop, aprovechando algunos
estilos y gradientes. Además me pareció interesante añadir un efecto hover con imagenes relacionadas a los enlaces.
Para añadir el menú vamos a
edición de HTML, buscamos
]]></b:skin> y añadimos los siguientes estilos justo antes:
/*Propiedades para el contenedor del menu*/
#menu {
padding:0;
margin:0 0 0 45px;
}
/*Propiedades para el menú como el ancho, alto, el borde, etc*/
#menu ul {
width:579px;
height:129px;
list-style-type:none;
float:left;
border-bottom: 4px solid #43ae2d;
padding:0;
margin:0;
}
/*Se agregan propiedades a cada lista*/
#menu ul li {
width:94px;
height:129px;
display:block;
float:left;
}
/*Configuración para la clase .inicio*/
#menu li.inicio {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/inicio.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.inicio span {
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.inicio a {
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.inicio a:hover {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgInicio.png) no-repeat;
padding: 80px 5px 0 5px;
width:100px;
}
/*Configuración para la clase .blog*/
#menu li.blog {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.blog span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.blog a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.blog a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgBlog.png) no-repeat;
padding: 80px 15px 0 15px;
width:100px;
}
/*Configuración para la clase .acerca*/
#menu li.acerca {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.acerca span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.acerca a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.acerca a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgAcerca.png) no-repeat;
padding: 80px 4px 0 4px;
width:100px;
}
/*Configuración para la clase .entradas*/
#menu li.entradas{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.entradas span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.entradas a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.entradas a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgEntradas.png) no-repeat center;
padding: 104px 0 0 0px;
width:100px;
}
/*Configuración para la clase .etiquetas*/
#menu li.etiquetas {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.etiquetas span {
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.etiquetas a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.etiquetas a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgEtiquetas.png) no-repeat center;
padding: 110px 4px 0 4px;
width:100px;
}
/*Configuración para la clase .archivos*/
#menu li.archivos{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
}
#menu li.archivos span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.archivos a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.archivos a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgArchivos.png) no-repeat center;
padding: 110px 4px 0 4px;
width:100px;
}
Guardamos los cambios y donde queremos que aparezca el menú (puede ser un gadget de HTML) pegamos lo siguiente:
<div id="menu">
<ul>
<li class="inicio"><center><a href="
#">
Inicio</a><br><span>
Descripción</span></center></li>
<li class="blog"><center><a href="
#">
Blog</a><br><span>
Descripción</span></center></li>
<li class="acerca"><center><a href="
#">
Acerca</a><br><span>
Descripción</span></center></li>
<li class="entradas"><center><a href="
#">
Entradas</a><br><span>
Descripción</span></center></li>
<li class="etiquetas"><center><a href="
#">
Etiquetas</a><br><span>
Descripción</span></center></li>
<li class="archivos"><center><a href="
#">
Archivos</a><br><span>
Descripción</span></center></li>
</ul>
</div>
Solo tienes que modificar los enlaces y el texto de descripción.
Para cambiar alguna imagen solo cambia la url en los estilos del menú.
