miércoles, 15 de junio de 2011

Un menú minimalista


A Fero le gusta el menú de Everything is a Remix un menú sencillo según sus palabras, y nos pregunta si hay forma de tener uno igual. Para añadirlo editamos un nuevo gadget de HTML y en su interior añadimos:
<div id="mainNav">
<ul>
<li class="page_item page-item-30 current_page_item"><a href="#" title="Inicio">Inicio</a></li>
<li class="page_item page-item"><a href="#" title="Perfil">Perfil</a></li>
<li class="page_item page-item-12"><a href="#" title="Contacto">Contacto</a></li>
<li class="page_item page-item-11"><a href="#" title="Blogger">Blogger</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>

Y antes de ]]></b:skin>  añadimos los estilos:

#mainNav{
margin-top: 10px;
padding: 5px;
background: #FBFBFB;
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
}
#mainNav ul{
margin: 0 auto;
width: 60em;
text-align: left
}
#mainNav li{
display: inline;
margin-right: 20px;
font-size: 1.5em;
text-transform: uppercase;
}
#mainNav li:last-child{
margin-right: 0;
}
#mainNav a:link,
#mainNav a:visited{
color: #999;
white-space: nowrap;
}
#mainNav a:hover,
#mainNav a:active{
text-decoration: underline;
color: #2E301C;
}
#mainNav .current_page_parent a:link,
#mainNav .current_page_parent a:visited,
#mainNav .current_page_item a:link,
#mainNav .current_page_item a:visited{
font-weight: bold;
color: #2A2D1A;
}
#mainNav .current_page_parent a:hover,
#mainNav .current_page_parent a:active,
#mainNav .current_page_item a:hover,
#mainNav .current_page_item a:active{
color: #2E301C;
}

Para configurar un menú esta entrada puede ser de utilidad.

No hay comentarios:

Publicar un comentario