viernes, 19 de noviembre de 2010

Poner menu horizontal con submenus

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

22 comentarios:

Shuske2 dijo...

No encuentro ese código en mi blog.Uso el nuevo editor de plantillas de Bloger

De todo para los blogger dijo...

Hola Shuske2 no tienes que buscar ningún código, sólo añadirlos,
ya me contaras
Saludos

Shuske2 dijo...

]]>:

Eso es el código que no encuentro.
Si no tengo que poner eso, dónde pongo el:

/* MENU DOS (Robs)
----------------------------------------------- */ (...)

Gracias.

Shuske2 dijo...

Perdón por el respost, pero no me puso el código.
Tú dices que hay que pegar el código de "(menu (robs), etc)" antes del código de "]]><*/b:skin*>:*"

Sin comillas ni astéricos, por supuesto.

De todo para los blogger dijo...

Eso es

De todo para los blogger dijo...

Lo buscas pulsando Ctrl-f?

Shuske2 dijo...

Sí, así lo busco.

De todo para los blogger dijo...

¿y no lo encuentras?

Shuske2 dijo...

Logre encontrarlo, pero ahora no se ve, sólo se ve cuando pongo el mouse encima.

Anónimo dijo...

donde tengo que pagar el segundo codigo? Gracias!

blogger dijo...

En un gadget HTML y no en la plantilla

LOFTBCN Arquitectura interior dijo...

Me funciona perfecto! muchas gracias! el unico problema es que el submenu tiene el mismo tamaño que el menú y tampoco se como modificar la justificación para que no este en la misma linea del menú. He estado mirando el codigo pero no encuentro donde modificarlo... me podrias ayudar? muchas gracias!

ChicoGon dijo...

Gracias por el aporte. Lo he metido en mi blog pero me funciona bien con Google Chrome pero no con Internet Explorer (IE6). Es por la version del explorer?

Miguel Angel LLorente dijo...

He probado a hacer otro nivel mas de menu, pero no funciona haciendolo de la manera que expones. ¿Le pasa a mas gente?

Anónimo dijo...

Hola!
Me funcciona perfectamente, pero tengo un problema: cuando paso el cursor por las pestañas se me abren todas sub-pestañas, pero solo puedo llegar con el cursor a las primeras 2 de arriba y se me cierra menu. Creo que el problema consiste en desplegar las sub-pestañas y la 3 y 4 y 5 se sobre ponen encima de las entradas, por eso no las puedo conseguir abrir.
Como puedo solucionarlo?
Separar las distancias entre las lineas de "menu" y "entradas" ? Como se hace?
Muchas Gracias!

daniel dijo...

Hola te quiero hacer una pregunta ¿se puede agregar otro menu a un submenu?

Si se puede¿como se hace?

Gracias.

kela dijo...

donde se publica dentro de las entradas¿?

De todo para los blogger dijo...

Hola Kela esto lo tienes que pegar en:
dentro de la plantilla del blog, en el html
en editar plantilla si estas usando el nuevo formato de blogger.
Ya me contaras

Rizel dijo...

Ayuda!!!! tengo un problema con los links
Me funcionana solo dos pestañas, ninguno de los submenus entra.
He puesto todos los links correctamente en el html pero no funcionan.

Meilan dijo...

Hola! Tengo una duda al respecto, lo hago todo paso a paso tal y como lo dices y no consigo que los submenús se expandan, se quedan como si fuera un menú fijo. ¿Alguna idea de qué puedo estar haciendo mal? Uso una plantilla de Blogger modificada con el editor de diseño.
Gracias!

Tania_InuKi dijo...

OLA! KMO HAGO PARA QUITAR EL PRIMER CODIGO DE MI HTML? ES URGENTE!! GRACIAS!

Miguel Angel Rodríguez López dijo...

Lo he intentado en no sé cuantas ocasiones y nada, menos mal que es un blog en pruebas. Dejo el enlace por sí me puedes ayudar... como verás está el menú pero cuando se debiera desplegar desaparecen las subpestañas tras la plantilla. Ya he probado varias plantillas, uf

http://pruebateacher.blogspot.com/

Publicar un comentario en la entrada

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones