Poner menu horizontal con submenus

  • noviembre 19, 2010
Poner menu horizontal con submenus

Os dejo este maravilloso men?? horizontal, en el cual podr??is modificar los sub-men??s y todas las pesta??as:

[1] A??adimos el c??digo CSS necesario desde «Edici??n HTML» en nuestro panel sin expandir la plantilla de artilugios, justo antes de ]]></b:skin>:

/* MENU DOS (Robs)
———————————————– */

#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:»Trebuchet MS»;
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}

#subnav li {
float: left;
padding: 0px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li {
}

#subnav li ul a {
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active {
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover {
position: static;
}


Es en este c??digo donde podemos hacer los cambios para escoger otro color diferente para el men?? por ejemplo, cambiando los c??digos de color en «background».

Lo principal a tener en cuenta es la anchura del men??, que est?? establecida en 873px en esta parte del c??digo (se??alado en negrita):

#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:»Trebuchet MS»;
}


Ah?? tendr??is que cambiar ese valor (873px) por el que mejor se adapte al sitio donde ir?? colocado. Si vais a ponerlo debajo de la cabecera, lo m??s adecuado ser?? que tenga el mismo ancho que esta por ejemplo.
Tambi??n pod??is sustituir el valor en pixeles por un porcentaje, as?? si pon??is «width: 100%» el men?? ocupar?? el ancho total disponible del sitio donde est?? colocado.

[2] Colocamos ahora el c??digo necesario para armar nuestro men?? en un gadget HTML que arrastraremos luego a donde vayamos a mostrar el men??:

<div id=»subnavbar»>
<ul id=»subnav»>

<li><a href=»URL DEL BLOG» title=»Inicio»>INICIO</a>
</li>
<li><a href=»» title=»»>PESTA??A1</a>
<ul>
<li><a href=»» title=»»>SUB-PESTA??A1</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A1</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A1</a>
</li>
</ul>
</li>
<li><a href=»mailto:» title=»Enviame un email»>CONTACTO</a>
</li>
<li><a href=»» title=»»>PESTA??A2</a>
<ul>
<li><a href=»» title=»»>SUB-PESTA??A2</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A2</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A2</a>
</li>
</ul>
</li>
<li><a href=»» title=»»>PESTA??A3</a>
<ul>
<li><a href=»» title=»»>SUB-PESTA??A3</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A3</a>
</li>
</ul>
</li>
<li><a href=»» title=»»>PESTA??A4</a>
<ul>
<li><a href=»» title=»»>SUB-PESTA??A4</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A4</a>
</li>
</ul>
</li>
<li><a href=»» title=»»>PESTA??A5</a>

<ul>
<li><a href=»» title=»»>SUB-PESTA??A5</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A5</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A5</a>
</li>
<li><a href=»» title=»»>SUB-PESTA??A5</a>
</li>
</ul>

</li></ul></div>


Es en este c??digo donde tenemos que colocar los enlaces y el texto que aparecer?? en cada pesta??a del men?? y de los sub-men??s.

Donde dice a herf= se coloca cada enlace entre las comillas.
Entre las comillas de title= colocamos el texto explicativo que se ver?? al pasar el puntero sobre el enlace.
En PESTA??A1, PESTA??A2, etc. colocamos el texto que se ver?? en cada pesta??a del men?? y en SUB-PESTA??A1, SUB-PESTA??A2, etc. el texto que se ver?? en cada sub-men??.


Para a??adir m??s pesta??as y subpesta??as al men??, fijaros muy bien en como est?? construido el c??digo:

El contenido de las pesta??as que no van a incluir subpesta??as, va incluido entre <li> y </li>

<li><a href=»URL DEL BLOG» title=»Inicio»>INICIO</a></li>

El contenido de la pesta??a que incluir?? subpesta??as ir?? incluido entre <li> y <ul> a continuaci??n estar??n las subpesta??as (cada una incluida entre <li> y </li>) y para cerrar terminaremos con </ul> </li>


<li><a href=»» title=»»>PESTA??A3</a><ul>
<li><a href=»» title=»»>SUB-PESTA??A3</a></li>
<li><a href=»» title=»»>SUB-PESTA??A3</a></li>
</ul>
</li>


Fuente

No Comments Found