Z-Graphics: css

Inicio
Descripción
Blog
Descripción
Acerca
Descripción
Entradas
Descripción
Etiquetas
Descripción
Archivos
Descripción

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

Menús con listas y css

Demo

Buscando no se que cosa en google me he encontrado con esta recopilacion de 120 menús para inspiracion. El menu de navegacion es una de las partes mas importantes no solo porque premite estructurar todos los archivos en función de un menú o de una lista de páginas principales, sino que puede darle personalidad al diseño.

En esta entrada he decidido mostrarles dos de esos menús que me han llamado la atencion, el uno porque sin necesidad de imagenes proporciona un toque de elegancia y el otro porque hace una descripción grafica de lo que podría ser la pagina.

El primero es de la pagina web Studio Imago

Si quieres hacer un menú como este tienes que editar dos partes de tu pagina web, agrega este codigo antes de la etiqueta </head>[+/-]

#menuZ{
padding:0;
width:960px;
margin:0
}
#menuZ ul{
margin:0px;
padding:0px;
list-style-type:none;
text-align:left;
float:left
}
#menuZ ul li{
display:block;
float:left;
text-align:center;
padding:0px;
margin:0px
}
#menuZ ul li a{
color:#7D818A;
text-decoration:none;
text-align:left;
background-color:#383D43;
padding-top:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
padding-right:0px;
padding-left:10px;
display:block;
float:left;
outline:none;
border-top:4px solid #fff;
width:127px;
padding-bottom:3px;
margin:0px;
border-bottom:1px solid #7d818a;
}
#menuZ ul li a strong{
font-size:11px;
color:#DEE0DB;
text-transform:uppercase;
display:block;
font-weight:bold;
line-height:10px;
padding-bottom:3px
}
#menuZ ul li a:hover{
color:#7D818A;
background-color:#30353B;
outline:none;
border-top-width:4px;
border-top-style:solid;
border-top-color:#43B9D7;
border-bottom:#6EA9B7 1px solid;
}
#menuZ a:active{
color:#7D818A;
background-color:#30353B;
outline:none;
border-top:#43B9D7 4px solid;
}
#menuZ li.active a{
color:#7D818A;
background-color:#30353B;
outline:none;
border-top:#43B9D7 4px solid;
}

y donde quieras que aparezca tu menú debes poner este codigo:[+/-]

<div id="menuZ">
<ul>
<li class="active"><a href="#home"><strong>Home</strong> Welkom</a></li>
<li class="default"><a href="#blog"><strong>Blog</strong> Webtoestanden</a></li>
<li class="default"><a href="#diensten"><strong>Diensten</strong> Wat we doen</a></li>
<li class="default"><a href="#portfolio"><strong>Portfolio</strong> Onze referenties</a></li>
<li class="default"><a href="#contact"><strong>Contact</strong> Get in touch</a></li>
</ul>
</div>

Debes cambiar las direcciones de los enlaces y las descripciones según tus necesidades.

El segundo menú fue tomado de ryancouser.com.

Si deseas agregar este debes hacer lo mismo que en el anterior, busca y pega el siguiente codigo antes de </head>[+/-]

#navZ{
width:540px;
height:200px;
margin:0;
padding:0;
float:left;
}
#navZ ul{
float:left;
display: inline;
height:200px;
padding: 0;
margin: 0;
list-style: none;
}
#navZ li{
float:left;
display: inline;
height:200px;
margin:0;
padding:0;
}
#navZ ul li a {
float:left;
width:80px;
height:50px;
margin:0;
padding:0 5px;
padding-top:150px;
display:inline;
color:#FFFFFF;
text-decoration: none;
text-align:center;
font-size:8pt;
font-weight:bold;
text-transform:uppercase;
}
#navZ ul li a:hover, #navZ a#here {
background-color:#7ABAC9;
text-decoration:none;
color:#222222;
}
#navZ li a.home{
background-image:url(homeicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a#here.home, #navZ li a.home:hover{
background-position:0 -200px;
background-repeat: no-repeat;
background-color:#7ABAC9;
text-decoration:none;
color:#222222;
}
#navZ li a.services{
background-image:url(servicesicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.blog{
background-image:url(blogicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.portfolio{
background-image:url(portfolioicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.about{
background-image:url(abouticon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.contact{
background-image:url(contacticon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a#here, #navZ li a:hover{
background-position:0 -200px;
background-repeat: no-repeat;
background-color:#7ABAC9;
text-decoration:none;
color:#222222;
}

y pega este codigo donde queiras que aparezca el menú:[+/-]

<div id="navZ">
<ul>
<li><a href="#" class="home" id="here">Home</a></li>
<li><a href="#services" class="services" >Services</a></li>

<li><a href="#blog" class="blog" >Blog</a></li>
<li><a href="#portfolio" class="portfolio" >Portfolio</a></li>
<li><a href="#about" class="about" >About</a></li>
<li><a href="#contact" class="contact" >Contact</a></li>

</ul>
</div>

Debes cambiar las direcciones de los enlaces y las imagenes si asi lo deseas. Y eso ha sido todo, si te gustó dejame un comentario.

Demo

Download Source

Autor