Acabo de publicar Regala Google Chrome por navidad |

Menú Earth

By Miguel Ángel Jiménez Achinte On 19:28




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ú.


Download SourceDownload PsdAutor





2 comentarios

  1. Muchas gracias Dr4kon, eso trato de hacer :)
    ya sabes que cualquier cosa que necesites puedes pedirmela y si puedo la posteo.

    Posted on 8/16/2009 7:01 p. m.

     

Publicar un comentario en la entrada al viejo estilo