[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:
No encuentro ese código en mi blog.Uso el nuevo editor de plantillas de Bloger
Hola Shuske2 no tienes que buscar ningún código, sólo añadirlos,
ya me contaras
Saludos
]]>:
Eso es el código que no encuentro.
Si no tengo que poner eso, dónde pongo el:
/* MENU DOS (Robs)
----------------------------------------------- */ (...)
Gracias.
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.
Eso es
Lo buscas pulsando Ctrl-f?
Sí, así lo busco.
¿y no lo encuentras?
Logre encontrarlo, pero ahora no se ve, sólo se ve cuando pongo el mouse encima.
donde tengo que pagar el segundo codigo? Gracias!
En un gadget HTML y no en la plantilla
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!
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?
He probado a hacer otro nivel mas de menu, pero no funciona haciendolo de la manera que expones. ¿Le pasa a mas gente?
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!
Hola te quiero hacer una pregunta ¿se puede agregar otro menu a un submenu?
Si se puede¿como se hace?
Gracias.
donde se publica dentro de las entradas¿?
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
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.
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!
OLA! KMO HAGO PARA QUITAR EL PRIMER CODIGO DE MI HTML? ES URGENTE!! GRACIAS!
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