MENU DE PESTA??AS EL HORIZONTAL

  • mayo 25, 2010

Menu horizontal







Primero entra a Dise??o > Edici??n de HTML y pega antes de ]]></b:skin> lo siguiente:

/* Men?? horizontal
———————————————– */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh5.ggpht.com/_qgZA1ny_dAs/SlimLLGQf4I/AAAAAAAAB-g/YKI9AdhUdng/lefttabbed.png) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img148.imageshack.us/img148/8764/tabbedlarge.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del men?? */

Ahora busca esta etiqueta:

<div id=’content-wrapper’>

Y pega debajo de ella esto:

<!– Men?? horizontal –>
<div id=’menu’>
<ul>
<li><a href=’URL del enlace‘><span>T??tulo 1</span></a></li>
<li><a href=’URL del enlace‘><span>T??tulo 2</span></a></li>
<li><a href=’URL del enlace‘><span>T??tulo 3</span></a></li>
<li><a href=’URL del enlace‘><span>T??tulo 4</span></a></li>
</ul>
</div>

S??lo debes cambiar los datos que est??n en rojo por los tuyos. Puedes agregar las pesta??as que quieras, s??lo a????delas antes de </ul>.
Las pesta??as que he hecho son de color gris, si no te gustan puedes quitar las dos URL que est??n dentro de #menu a y #menu a span y usar el color de fondo que quieras.
El color y tama??o de la letra lo puedes cambiar dentro de #menu a span {font:
Este men?? quedar?? debajo de la cabecera, si quieres moverlo a otro lugar entonces s??lo pega el ??ltimo c??digo en un elemento HTML/Javascript y arr??stralo donde mejor te apetezca.

No Comments Found

Deja un comentario