Menu horizontal con borde superior

  • mayo 26, 2010

menu horizontal
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.

No Comments Found