Z-Graphics: Menús con listas y css

Menús con listas y css

By Unknown On 19:47

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