Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Menú desplegable con niveles y subniveles

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.

ViVy dice...

aplausos!!!!!!!!

Jaime Trujillo Escobedo dice...

Jajajaja, ¡muchas gracias ViVy!

Analía Alvado -garabato- dice...

GRACIAS JAIME!!! Este menú era el que necesitaba y no podía encontrarlo. Ya me pongo a probarlo

Abrazo argentino

Jaime Trujillo Escobedo dice...

Analía Alvado -garabato-, es estupendo poder ayudarte. Si necesitas ayuda o tienes cualquier duda no dudes en consultarme.

Abrazo español ☺

elcabe dice...

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,

Jaime Trujillo Escobedo dice...

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?

Nincab dice...

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

Nincab dice...

Gracias Jaime llevé a cabo tu ejemplo claro que hice algunas modificaciones, pero me resulto oka... gracias

nincab.blogspot.com

Jaime Trujillo Escobedo dice...

Nincab, ¡Te ha quedado precioso! Me encantan esos tonos claritos en color verde... lo hace muy elegante.

el que grita!! dice...

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,

Cristina dice...

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

Cristina dice...

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/

Arny Joaquín dice...

¡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!

Jaime Trujillo Escobedo dice...

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 ;).

Jaime Trujillo Escobedo dice...

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!

Jaime Trujillo Escobedo dice...

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.

Cristina dice...

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

Jaime Trujillo Escobedo dice...

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 ;).

Majonyjony dice...

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

ERICSSON - MANIA dice...

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

Anónimo dice...

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.

Jaime Trujillo Escobedo dice...

¡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 ;).

Universo_Z dice...

Una joya, esta genial gracias.

Jaime Trujillo Escobedo dice...

Gracias a ti, Universo_Z, se agradece mucho tu comentario.

Anónimo dice...

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

Jaime Trujillo Escobedo dice...

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;

Sole dice...

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!

Jaime Trujillo Escobedo dice...

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.

Javier Alfaro dice...

funciona con todas las plantillas??

Jaime Trujillo Escobedo dice...

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.

Javier Alfaro dice...

ok gracias te aviso

Javier Alfaro dice...

jaime disculpa pero sabes no encuentro esto esa parte donde pusiste ahora busca esta linea

Javier Alfaro dice...

no la hayo

Javier Alfaro dice...

a una pregunta como pones eso que tenes al lado derecho de tu blog eso como categorias??? es con esto

Jaime Trujillo Escobedo dice...

Javier, lo que buscas está explicado en esta entrada.

Javier Alfaro dice...

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

Javier Alfaro dice...

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

Jaime Trujillo Escobedo dice...

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.

Jaime Trujillo Escobedo dice...

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).

Javier Alfaro dice...

logre solucionar el problema gracia jaime por la ayuda te agradsco mucho

Javier Alfaro dice...

ahora una ultima pregunta jaime como lo hago mas largo

Jaime Trujillo Escobedo dice...

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).

Jaime Trujillo Escobedo dice...

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>

inframundo dice...

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

Jaime Trujillo Escobedo dice...

Inframundo, sin la dirección de tu blog no puedo ayudarte. Espero tu respuesta.

Edudemonio dice...

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.

1001ideascontracrisis dice...

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.

Jaime Trujillo Escobedo dice...

Me alegra que te haya funcionado 1001ideascontracrisis. Internet Explorer suele alterar el aspecto de muchos artilugios (como los menús). ¡Saludos!

Jaime Trujillo Escobedo dice...

¡Bienvenido Edudemonio! Atento a mis próximas entradas ya que publicaré un menú horizontal desplegable como el que deseas. Saludos.

diariopegassus dice...

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.

Jaime Trujillo Escobedo dice...

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.

Carol dice...

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

Jaime Trujillo Escobedo dice...

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">

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo