Menu horizontal con borde superior

Este es un menú horizontal con un toque juvenil el cual tiene un borde superior y las pestañas cambian de color al pasar el mouse.

Para poner este menú en tu blog, entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Menú horizontal
----------------------------------------------- */
#menulineup {
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Color de la línea superior*/
background: transparent;
}

#menulineup ul{
margin:0;
margin-left: 40px; /*Margen izquierdo entre la primera pestaña y el borde*/
padding: 0;
list-style: none;
}

#menulineup li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#menulineup a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margen entre cada pestaña*/
padding: 5px 10px 5px 10px;
background-color: lightblue; /*Color de las pestañas*/
border-bottom: 8px solid white;
}

#menulineup a:hover{
background-color: #D10000; /*Color de las pestañas al pasar el cursor*/
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000; /*Color del borde inferior al pasar el cursor*/
color: white;
}

Ahora entra a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega esto:
<div id="menulineup">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
<li><a href="URL del enlace">Título 5</a></li>
</ul></div>
Ya sólo arrastra el elemento HTML/Javascript hasta abajo de la cabecera y cambia las URL de los enlaces y los títulos de las pestañas.

Puedes modificar los colores del menú a tu gusto; en el primer código he puesto las indicaciones para que sepas dónde hacer los cambios.

Fuente: ciudadblogger

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika