Hace unos días comencé a crear un menú desplegable con niveles y subniveles. Hoy puedes instalarlo en tu blog siguiendo estos simples pasos.
> DEMO
Diseño>edición HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS para dar estilo al menú:
/* Menu desplegable
------------------------------------------------------*/
#menubloque {
background:#8c8c8c;
width: 500px;
height: 35px;
font-size: 13px;
color: #ffffff;
border: 1px solid #424242;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:'Trebuchet MS',Arial,Verdana,Sans-Serif;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #FFFFFF;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: none;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #000000;
background: #cccccc;
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: none;
background: #bbbbbb;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background: #e3e3e3;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}
/* Fin menu desplegable ---------------------------*/
Ahora busca esta línea:
<div id='content-wrapper'>
Y justo encima pega este código para insertar el menú debajo de la cabecera:
<div id='menubloque'>
<ul id='menudesplegable'>
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
<li>
<a href=''>Categorías</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li>
<a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=''>Categorías 2</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 5</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Si deseas insertar el menú encima de la cabecera busca la etiqueta <body> y pega el código debajo.
Sustituye en cada caso:
TITULO: por el título de la página o el enlace.
URL DE LA PAGINA: por la dirección del blog o la página web.
Notas:
El bloque señalado en verde es el bloque que contiene los enlaces "fijos" es decir, los que no despliegan opciones.
Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).
Si tienes alguna duda no dudes en preguntarme.
Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).
Si tienes alguna duda no dudes en preguntarme.
¿Problemas al comentar? Utiliza 
aplausos!!!!!!!!
Jajajaja, ¡muchas gracias ViVy!
GRACIAS JAIME!!! Este menú era el que necesitaba y no podía encontrarlo. Ya me pongo a probarlo
Abrazo argentino
Analía Alvado -garabato-, es estupendo poder ayudarte. Si necesitas ayuda o tienes cualquier duda no dudes en consultarme.
Abrazo español ☺
holaaa! vcs sabs ke no peudo poner ningun menu ni na no se porke, pego todo i desps pongo vistapreva y se me cierra la ventane i me dice ke hay algun errir :S no se , bueno grax !
santhee,
Elcabe, ¿Qué clase de error te da? ¿El error es de blogger?
Como dices que se cierra la ventana, podría tratarse de un problema con el navegador . A mi me sucedía con Firefox (y me sigue sucediendo en ocasiones). ¿Usas Firefox?
Gracias Jaime, tome este menú y lo realice en mi blog claro que haciéndole unas modificaciones pero me quedó super, asi que muchisimas gracias, sigue adelante es de mucha ayuda para nosotros que buscamos ejemplos para llevar a cabo nuestro objetivos.
www.nincab.blogspot.com
Nincab
Gracias Jaime llevé a cabo tu ejemplo claro que hice algunas modificaciones, pero me resulto oka... gracias
nincab.blogspot.com
Nincab, ¡Te ha quedado precioso! Me encantan esos tonos claritos en color verde... lo hace muy elegante.
Hola,
Me sale el menú y te doy mil aplausos por ello, porque nadie lo había conseguido, pero el problemilla es que no me salen las pestañas en horizontal sino en vertical. Míralo en el enlace...http://flweddingplanner.blogspot.com/
Podrías decirme el por qué o como solucionarlo?
Gracias,
Hola Jaime tengo un menú desplegable que la verdad no recuerdo ni como lo hice, pero tengo un problema, si me pudieras ayudar te lo agradecería mucho. Si te fijas en mi blog hay una parte del menú desplegable que queda vacia, podría ponerlo de forma que ocupe toda la cabecera, es que queda un poco mal, pero no se como arreglarlo. Muchas gracias
Hola Jaime, te quería hacer una consulta en mi menú la barra no ocupa toda la cabecera me podrías decir como ponerla para que la ocupe, es que queda muy fea la parte del final de otro color, es un poco chapuzas. Muchas gracias
http://tardesdejabon.blogspot.com/
¡Hola buen Jaime!
Precioso menú, sobrio y elegante. Espero puedas aclararme estas dudas:
¿Podría colocarse el segundo conjunto de códigos en un gagdet HTML bajo la cabecera? Sin tener que editar la plantilla.
¿En caso de no necesitar los enlaces fijos, es decir, los que no contienen más opciones, podrían eliminarse? Y con ello tener todos los enlaces como categorías con sub categorías.
Muchas gracias y sigue con tu excelente trabajo, amigo!
el que grita!!, intenté darle un vistazo a tu menú pero no conseguí visualizarlo.
Agradecería que me enviases el blog en el que se encuentra ;).
Cristina, entendí a la perfección lo que deseas hacer y debo comentarte que es muy sencillo conseguir el aspecto que pides :D.
Busca este bloque en tu plantilla y añade la línea que ves en negrita:
#MainMenu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://i41.tinypic.com/f3gv1e.jpg) repeat-x scroll right top;
border-color:#9AB6D2;
border-style:solid;
border-width:0 0 0;
height:32px;
}
Podrás ver el resultado haciendo Vista previa.
¡Abrazos!
Arny Joaquín, a continuación responderé tus dudas...
1) Se puede colocar en un gadget html-javascript bajo la cabecera (aunque puede ser un tanto costoso ya que tienes que arrastrarlo justo debajo hasta que, en un punto exácto se posicione bajo dicho elemento). También dispones de la opción que ofrezco en esta entrada, la cual te indicará en dos simples pasos la forma de habilitar el Crosscol (zona debajo del header).
2) Para dejar el menú sin enlaces "fijos" y mantener categorías desplegables elimina esto en el código:
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
Ahora copia el resto del código y pégalo debajo, antes de los cierres </ul> y </div>.
Si necesitas cualquier otra cosa avísame.
Jaime muchas gracias, pero no conseguí encontrar el bloque ni ninguno parecido y estuve dando vueltas intentando buscar algo similar, pero fue imposible. De todos modos he puesto el fondo del mismo color y ya no queda tan chapuzas, aunque hacerlo bien estaría mejor. De todas formas gracias
Cristina, prueba entonces a pegar el bloque de CSS antes de la etiqueta ]]></b:skin> y haz vista previa para ver si funciona.
En caso de no hacerlo, no te preocupes, buscaremos otra solución ;).
Hola Jaime,de nuevo mil gracias!
Yo he hecho unos cuantos cambios,para "clonar" el menú de un programa sobre el que presto ayuda en mi blog. http://configurarpokertracker.blogspot.com/
Me ha costado un poco ya que he puesto imagenes hasta de los botones.
Lo he puesto en un elemento html,pero lo puedo mover a donde quiera añadiendo esto
position:absolute;
left:7px;
top:123px;
detras de #menubloque { , en el css.
La cuestion es que me gustaria que lo vieras para darme alguna idea de donde colocarlo,y si pudiera quitarle el margen vertical que sale en los submenus.
Enhorabuena por tu trabajo.
Por cierto,yo tengo una ninfa a la que adoro...
Mira que mona hace ya algun tiempo
http://www.youtube.com/watch?v=HH61I_8paCY
me gusta justo y exactamente lo q estaba buscando para mi blog ahora mismo me pongo a editar mira mi blog :www.elblogsony.blogspot.com
Jaime como se hace el menu de categorias que tienes en tu blog? x cierto ya me cree el blog nuevo pero todavia no lo puedes encontrar en google.
¡Majonyjony! Ya veo el cambio que le has dado, está estupendo ;).
Pienso que el lugar en el que está es el más cómodo y fácil de ver.
En cuanto al márgen de los enlaces... ¿podrías enviarme el CSS del menú? De esa forma será todo más sencillo.
¡Qué maravilla de ninfa! ¿Le enseñaste a cantar tú? Es espectacular, gracias por compartir el vídeo ;).
Una joya, esta genial gracias.
Gracias a ti, Universo_Z, se agradece mucho tu comentario.
Hola Jaime, tengo un problemilla y es que no encuentro la manera de poner las letras en mayúsculas y de quitarles el subrayado. si pudieras explicarme todo sería mucho más fácil,
gracias de antemano y felicidades por tu blog
Anónimo, en los bloques de CSS busca las dos líneas text-transform: lowercase; y reemplázalas por text-transform: none;.
Para deshacerte del subrayado, añade bajo la línea #menudesplegable li li a:hover, #menudesplegable li li a:active { esto:
text-decoration: none;
Hola!
Estaba pasando por aquí y me gustó el menú desplegable, asi que lo voy a poner en mi página!
Pero me gustaría que tuviera más categorias hacia el lado, me podrías decir como agregarlas?
Y si es posible, como agregar más "titulos" en algunas categorias
gracias!
Sole, para añadir enlaces hacia los laterales, inserta líneas como esta:
<li><a href='URL DE LA PAGINA'>TITULO ENLACE</a></li>
Debajo de la línea resaltada en verde y que tiene como título 'Sobre mí'.
Para agregar más títulos, añade líneas como esta...
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
En el bloque de la categoría a la que pertenezcan los títulos.
funciona con todas las plantillas??
Claro Javier, lo único que debes tener en cuenta el ancho del menú con respecto al outer-wrapper o ancho del blog.
Si al instalarlo en una plantilla tienes problemas dímelo.
ok gracias te aviso
jaime disculpa pero sabes no encuentro esto esa parte donde pusiste ahora busca esta linea
no la hayo
a una pregunta como pones eso que tenes al lado derecho de tu blog eso como categorias??? es con esto
Javier, lo que buscas está explicado en esta entrada.
jaime logre poner el menu desplegable con sus niveles y subniveles pero me aparece desplegado del todo aqui en este blog los pruebo antes de ponerlos en el otro blog que tengo www.kaendono.blogspot.com osea que no se me despliega espero tu respuesta grax
aaa jaime otra cosa en tu entrada del barra desplegable como en el balcon tengo otro problem los puse pero ahora no se cual es la etiqueta con la que se agrupan mis entrdas ayuda si puedes ok
Javier, localiza una de las entradas que contengan la etiqueta que desees enlazar y mándame su dirección. De esta forma podré ayudarte a conseguir la URL de la etiqueta.
Javier, utiliza las teclas Ctrl y F para encontrar la etiqueta del primer paso. El error que aparece en tu blog se debe al lugar en el que incluiste los bloques de CSS (del primer paso).
logre solucionar el problema gracia jaime por la ayuda te agradsco mucho
ahora una ultima pregunta jaime como lo hago mas largo
Gracias a ti, Javier. La próxima vez, sigue con precaución las indicaciones (la mayoría de los trucos requieren CSS y por tanto has de incluirlo en el lugar adecuado).
Javier, añade líneas como esta:
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
Siempre antes de la línea:
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
hola no puedo encontrar esta exacto
div id='content-wrapper'>
la encuentro
div id='xxxxxx'> los que de dejo con x lo encuentro en unas 3 formas distintas pero no la que tu mencionas
Inframundo, sin la dirección de tu blog no puedo ayudarte. Espero tu respuesta.
Hola amigo, me musta mucho tu blog y veo que tienes cosas increibles, tengo varios blogs y no se si tendré tanto tiempo para incluir tantas aplicaciones como he visto, pero en este momento lo que me trae de cabeza es encontrar un menú horizontal con submenús desplegables que funcione con una de mis plantillas, en concreto esta: http://jornadasdifusionsantiponce.blogspot.com/ y que se vea bien en IE. Si me facilitas una opción válida te estaré agradecido eternamente. Saludos.
Muchas gracias por tu aporte, lo he probado y en ciertas plantillas no se ve bien en IE, me he visto obligado a cambiar la plantilla para que funcionara.
Salu2.
Me alegra que te haya funcionado 1001ideascontracrisis. Internet Explorer suele alterar el aspecto de muchos artilugios (como los menús). ¡Saludos!
¡Bienvenido Edudemonio! Atento a mis próximas entradas ya que publicaré un menú horizontal desplegable como el que deseas. Saludos.
Hola Maestro:
Llevo muchos días detras de un menu despegable y el tuyo me biene al pelo pero tengo un problema. Si entras en el mi blog de pruebas http://pruebapegassus2010.blogspot.com/ . cuando se pincha sobre el menu, las pestañas que se abren quedan detras. ¿ Como puedo sacarlas encima?
Muchas gracias por el esfuerzo para ayudarnos.
Diario Pegassus, prueba a colocar el menú encima del bloque de entradas, no en la zona crosscol (bajo la cabecera). Si el error continúa avísame.
Hola Jaime, he intentado seguir los pasos pero no encuentro div id='content-wrapper' por ningún sitio. ¿Sabes si hay alguna posibilidad de que en mi plantilla salga distinto? He estado probando en mi blog de pruebas
http://ladypegaso.blogspot.com
Carol, aunque he comprobado que el menú aparece ya en el lugar idóneo, la etiqueta a buscar en tu plantilla (perteneciente a las nuevas que ofrece blogger en su diseñador) será:
<div class="main-outer">