JMiur [E]

Este es un menú desplegable creado por Sven Wappler que requiere del uso de las librerías Prototype + Scriptaculous.

Una vez que tenemos descargado el script , lo alojamos en un servidor o lo insertamos en la plantilla antes de </head>:
<script src="URL_menu.js" type="text/javascript"></script>


El CSS elemental también podemos descargarlo y, como siempre, lo mejor es copiar su contenido y agregarlo a la plantilla, ya sea dentro de <b:skin> </b:skin> o entre etiquetas <style> </style> para poder editarlo y adaptarlo a nuestro sitio:
#menu { /* es el bloque contenedor del menú */
background: #678;
border-bottom: 1px solid #ABC;
border-top: 1px solid #ABC;
padding-left: 10px;
height: 32px;
width: 100%;
}
#menu  ul { /* las listas */
display: block;
line-height: 1em;
list-style: none;
margin: 0 !important;
padding: 0 !important;
z-index: 90
}
#menu  ul li { /* los items de las listas */
float: left;
font-size: 12px;
line-height: 1, 5em;
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li a { /* los enlaces de las listas */
background: transparent;
color: GreenYellow;
display: block;
font-weight: bold;
line-height: 32px;
text-decoration: none;
margin: 0;
padding: 0 1em;
width: auto;
}
#menu  ul li a:hover { /* efecto hover sobre los enlaces */
color: #FFF;
text-decoration: none;
}
#menu  ul.level2, #menu ul.level3 { /* las listas desplegables */
background: #678;
border-top: 1px solid #ABC;
left: 0px;
position: absolute;
top: 0px;
visibility: hidden;
}
#menu  ul.level2 li, #menu ul.level3 li { /* cada item de las listas desplegables */
border-bottom: 1px solid #ABC;
float: none;
margin: 0;
padding: 0;
width: 150px;
}
#menu  ul.level2 li a, #menu ul.level3 li a { /* cada enlace de las listas desplegables */
padding: 0 1em;
}
#menu  ul.level2 li a:hover,#menu  ul.level3 li a:hover { /* efecto hover sobre esos enlaces */
background-color: #456;
}
Hecho esto, ya podemos crear nuestro menú que no será otra cosa que una lista de enlaces:
<div id="menu">
<ul class="level1" id="root">
<li>
<a href="#">Menu 1 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 1.1.</a></li>
<li><a href="#">Submenu 1.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.2.1.</a></li>
<li><a href="#">Submenu 1.2.2.</a></li>
<li><a href="#">Submenu 1.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 1.3.</a></li>
<li>
<a href="#">Submenu 1.4. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.4.1.</a></li>
<li><a href="#">Submenu 1.4.2.</a></li>
<li><a href="#">Submenu 1.4.3.</a></li>
<li><a href="#">Submenu 1.4.4.</a></li>
</ul>
</li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 2</a></li>
<li class="sep">|</li>
<li><a href="#">Menu 3</a></li>
<li class="sep">|</li>
<li>
<a href="#">Menu 4 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 4.1.</a></li>
<li>
<a href="#">Submenu 4.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 4.2.1.</a></li>
<li><a href="#">Submenu 4.2.2.</a></li>
<li><a href="#">Submenu 4.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 4.3.</a></li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
Es muy sencillo y para no equivocarse, lo mejor en usar tabulaciones para darnos cuenta visualmente de cuál es la etiqueta que debemos cerrar y, por supuesto, reemplazar el atributo HREF de los enlaces por la dirección URL a donde queremos dirigirnos.

44 comentarios:

Analía Alvado  

Abandono... mañana, o sea hoy, quizá más tarde... sigo con la lista de enlaces que me quedó totalmente desenlazada :O

Tabulaciones ¡no! TRI-BU-LA-CIO-NES :D

Responder
Gem@  

A esto le llamo yo un buen tutorial, con explicaciones y ejemplos lo demás son simples simulacros.
Eres grande :D

Responder
Claudio  

En este blog mio: http://claurama.blogspot.com (aun en construccion) tengo los menus por defecto. es facil cambiar el nombre en la plantilla. Mi pregunta es: Se le podría agrega los sub-sub-menus a la plantilla?

Responder
Marianella  

jejeje creo que acompañoi a Analía, es bastante largo :S, pero solo con paciencia y perseverancia se conquista hasta la cumbre mas alta.

Responder
Claudio - Poca Tinta  

Genial lo bueno es que no causa conflictos ya que la mayoría usamos scriptaculous, el día que lo podamos combinar con Mootools seré feliz. :D

Responder
Jorge  

Hola JMiur.
¿Este menú solo sirve de menú horizontal?
Y me me gustaría saber si lo que aparece debajo de los post y de los comentarios,(me refiero a lo de entradas antiguas, entradas más recientes, inicio y que se suele sustituir por iconos de flechas y casa)se puede cambiar el mensaje que da al poner el cursor encima de él? por ejemplo aqui no tienes iconos y tienes la palabra anterior, inicio y siguiente y si ponemos el cursor sobre la palabra anterior aparece el mensaje "entradas antiguas", ¿se puede cambiar por el mensaje "anterior" al poner el cursor sobre la palabra anterior o el icono de la flecha o eso es imposible?
Muchas gracias, acabo de comenzar en este mundo de blogger y todo lo que aportas es de gran utilidad.

Responder
Bocha  

JMiur... te hago una pregunta. En mi footer (el que esta dividido en tres) el #col1 h2{ es el que indica el titulo de cada elemento, lo edite muchas veces pero no logro que me quede un poco mas pegado al contorno de todo el footer...

Responder
Theemilio_crazy  

Jmiur, Ya no se Que hacer, Estoy por volverme loco ... Es que mi buscador no funciona y no se que puedo hacer y los usuarios ya se estan quejando mucho por que no pueden encontrar nada, no aparece nada aunque este en el blog. Por ejemplo estas peliculas

Busqueda Implacable lo escribes y no aparece y aqui esta el link

http://www.elmundodepeliculas.org/2009/01/busqueda-implacable-taken.html

osea que si esta en el blog

esa es solo una de tantas que no aparecen, Jmiur espero que me puedas ayudar, ya no se que puedo hacer...

Responder
JMiur  

Vamos, Analía; sólo es cuestión de paciencia :D

Gem@: ¿Cómo le va tanto tiempo? :D

Claudio: Para tener submenues siempre tendrás que usar alguna clase de script o un CSS muy especial para que se desplieguen ¿Puede cambiarse uno por otro? Si. Hay que probarlo pero seguramente si.

Marianella: Es largo y engorroso pero se puede. Paciencia y tabular para no perderse, ese es el secreto :D

Claudio - Poca Tinta: Por ahora, por lo menos en Blogger, eso parece imposible ¿verdad?

Jorge: Este, es solo horizontal. Paara que fuera vertical debería cambiarse todo el CSS. No lo he probado. Lo de anterior y antigua es lo que se ve en expr:title='data:newerPageTitle' y en expr:title='data:olderPageTitle' Alguna vez lo cambié pero el resultado fue que el blog colapsó :$ Así que desde entonces, no he vuelto a intentarlo. En caso de hacerlo, deberías usar title='EL TEXTO' en lugar de expr:title='data:xxxxxxxx'

Bocha: No puede estar más pegado porque está en el borde del elemento que lo contiene que es HTML3. Para moverlo a la izquierda debería tener un margen negativo a la izquierda. Te parece que queda separado porque lo que contiene el elemento HTML3 es una lista ordenada OL y en las listas, el número es algo que sale hacia afuera (outside). Agrega una definición de listas:
ol, ol li {list-style-position: inside;}
y veras que el elemento HTML3 es más angosto de lo que suponías. Esa propiedad hace que los números se muestren adentro y no afuera.

Theemilio_crazy: Pués hasta ahí es donde puedo responderte. El código es correcto y no sé que otra cosa puede hacerse ya que no conozco ninguna forma de controlar los resultados de un buscador.

Responder
Claudio - Poca Tinta  

Si es imposible por el momento, y nos restringe en muchas opciones. pero así es blogger :D

Responder
JMiur  

En realidad, no es tanto un problema de Blogger como de incompatibilidad entre las librerías en si mismo. Lo mismo pasa en WordPRess, no es sencillo combianr estas frameworks.

Responder
Dark Amethyzt  

Me funcionó perfectamente ;) gracias por esta información.
Me gustaría saber qué tengo que hacer para que el contenido del menú quede centrado.

Gracias.

Responder
Claudio - Poca Tinta  

Si tienes toda la razón, es mi manía que hace echarle la culpa de todo a Blogger ó Google, Bill Gates, Bush, Chavez, etc.

Los culpo desde la extinción de los dinosaurios hasta el calentamiento global :D

Responder
JMiur  

Dark Amethyzt: Si se trata de los items, para centrarlos, agrega:
#menu ul.level2 li, #menu ul.level3 li {
...........
text-align:center;
}

Claudio: Es verdad aunque ... creo que de la extinción de los dinosaurios SI tiene culpa ... creo.

Responder
cargohe  

hola JMiur puse un menú en mi blog cargohe descargas pero resulta que tengo una scrip que dice lo mejor en descarga directa y el menú sale por detrás de el y entonces no se ve, que puedo hacer sin necesidad de quitar el scrip.

Responder
JMiur  

No veo que ocurra eso ni en Firefox ni en IE8. Esta es la captura

Responder
lk  

hola jmihur. estoy con problemas. si vas a http://paraninosconcabeza.blogspot.com verás que en el footer puse un DIRECTORIO que debiera desplegarse para mostrar los banners que están escondidos. si clicas en la palabra o en la flecha TE VAS HACIA ARRIBA y NO SE DESPLIEGA. ¿podrías mirar en mi plantilla cuál es el problema?

Responder
JMiur  

Al parecer, no se carga la librería Effects y por lo tanto, el script no funciona.
Mirando el código fuente, veo que estás cargando dos veces varios scripts, incluyendo los API de Google ¿es así? El problema podría estar ahí.

Responder
lk  

gracias jmihur, pero yo no sé arreglar eso. no sé cómo cargar la librería effects ni tampoco se´qué es lo que stá repetido. más bien tiendo a creer que el problema estaba de antes. hay algo en mi plantilla que hace el c´ódigo de rosa funciona, porque está bien explicado, pero aunque lo puse bien 3000 veces, no hay caso. lo que necesitaría es que alguien me arreglase el desperfecto o me señlara con exactitud dónde reside el problema, qué he hecho mal y exactamente dónde. acabo de mandarle mi plantilla y el contenido del gadget a gem@ con la esperanza que ella me marque con color qué es lo que está mal, qué debo quitar o añadir, etc.

Responder
saccperuano  

Muchas gracias amigo lo logre lo logre, eres muy amable x compartir con nosotros todos tus secretos y desinteresadamente, siendo tan espontaneo, amable un pan de dios (y) ;)

Responder
JMiur  

Gracias por el comentario , saccperuano :$

Responder
Lujo  

Hola J.Miur,
Estoy probando este truco y me sale sin problemas, pero se coloca en la parte superior del header. Quisiera que se ubicara en la parte inferior de la misma,(por encima del crosscol).
¿¿Se te ocurre alguna idea sobre si es posible hacerlo??.
El blog del que te hablo es http://blogdelujo.blogspot.com/ (borra esto si crees que es spam) y la plantilla es una Thisaway de Blogger.
Enhorabuena por este gran blog de referencia.

Muchas gracias de forma anticipada por tu tiempo empleado en esta consulta.
Feliz semana!
Saludotes!

Responder
JMiur  

Auqnue no puedeo ver el esquema de la plantilla online, podrías mover todo eso y colocarlo debajo del header mismo, directamente en la plnatilla o agregando un elemento HTML en el header.

También lo podría poner dentro de crosscol.

Responder
Lujo  

Hola J.Miur,
Muchísimas gracias por tu sabio consejo y tiempo empleado. Al final quedó donde yo quería, ¡estoy muy contenta! :)
Sólo me falta hacer los enlaces...:$
Reitero mi agradecimiento. He aprendido algo más gracias a ti.
Feliz semana!
Un abrazo!

Responder
JMiur  

Me alegro que funcionara, Lujo :D

Responder
Filosaletra  

Hola, JMiur:
¿Cuál es la URL_menu.js que debo colocar en el script?
Creo que es aquí donde tengo el problema, porque http://...com/googlepages.com/Entradas_expandibles.txt' type='text/javascript'/>, pero no funciona. No se despliega nada de lo que coloqué a continuación.
Gracias

Responder
JMiur  

La URL donde hayas subido y alojado el script. La que veo en tu blog es la de un script para expandir entradas y no el de este scrip.

Responder
Adrián J. Messina  

Esta muy bueno, tiene un lindo efecto y es muy dinamico.
Chequealo como quedo en mi blog con algunas modificaciones, pero utilizando tu codigo fuente.

Espero tu respuesta, un gran saludo.!

http://panoramicadelobservador.blogspot.com

Responder
JMiur  

Bien; me alegra que fuera útil :)

Responder
a|-|y|-|m|-|g  

Muy bacano y práctico el menú, aunque como lo utilice en una aplicación, me toco hacer unos cambios puesto que la única forma que cargara bien luego de autenticarse un usuario era recargando la página, por tanto me toco cargar el menú completo y ocultarlo. Existe la forma de colocarle imágenes como una flecha hacia abajo cuando se despliega el menú?

Responder
JMiur  

Tal vez colocándolas como background en #menu ul li a:hover { } y quitando el fondo en #menu ul li a { }

Responder
Bilosony2™  

Tengo una duda anda bien en todos los nevegadores???? Porque hay algunos que no andan en IE u otros navegadores.. saludos!!

Responder
JMiur  

No sé a cuál navegador haces referencia; funciona perfectamente en IE7, IE8, Firefox, Chrome, Safari y Opera.

Responder
Prof. de Música  

Por + q lo intento no puedo hacer que se desplege el menu, solo aparece y listo, tube algunos problemas al copiar la informacion porque no se copia en el mismo margen en el que aparece aqui, asi que despues de copiar comparando con lo publicado arriba corregi los margenes y la posicion, copie todo donde se indica y probe de diferentes formas, incertando el contenido del js directamente a la plantilla y alojandolo en dropbox folder y nada de nada no se deplega... :) no pongo caras tristes porque no importa hay que serguir intentando o buscando otras maneras.

Responder
La Tobonera  

Hola JMiur !

Como podriamos añadirle el efecto deslizante a este menu desplegable ? habría que modificar el CSS o el script JS ?

Me podrías dar un ejemplo ?

Gracias de antemano y saludos,

Sergio

Responder
La Tobonera  

Hola JMiur

No logro que funcione los submenus en mi blog http://www.latobonera.blogspot.com. Para verificar si tengo algun error, he copiado y pegado el CSS y la lista de enlaces tal como lo publicas, pero tampoco funcionan los submenus.

Alguna idea de que puede estar sucediendo ?

Slds,

Sergio

Responder
JMiur  

Es que estás utilizando jQuery y Proototype juntas en el mism o blog y eso no es posible hacerlo porue son incompatibles. Debes usar una u otra.

Responder
La Tobonera  

Hola Jmiur

Si, es cierto y gracias Ya elimine Jquery y otra vez he copiado y pegado el CSS y la lista de enlaces tal como lo publicas, pero tampoco funcionan los submenus.

De otra parte, me gustaría, si se puede añadir el efecto deslizante.

Gracias de nuevo y saludos,

Sergio

Responder
JMiur  

Bien. Sigo con los detalles que se van viendo. Cargas Prototype pero, la librería, debe ser cargada antes que los scripts que se utilizan con ella así que mueve el código de tal forma que sea el primero de los scripts ya que de lo contrarioo, salta algún error en cualquiera de ellas.

Responder
La Tobonera  

Hola Jmiur

Lo estoy probando en http;//www.latobon.blogspot.com y la cosa está así:

Despues de /b:skin esta primero el script de google de scriptaculuos e inmediatamente despues el script de menu.js y el CSS entre styles quedó justo antes de /b:skin

estoy usando la nueva plantilla viajes de blogger.

los codigos ha estado de turismo dentro de la plantilla en casi todas partes pero no he contado con la suerte de colocarlos donde supuestamente deben estar y la cosa es que no logró que los submenus funciones.

Vos que pensas ?

Gracias y saludos,

Sergio

Responder
JMiur  

Ahi lo veo funcionando aunque conviene que lo pruebes en entradas donde no haya tantos scripts de prueba que implican un tiempo de carga muy grande (por lo menos con mi conexión). Ene sta, por ejemplo:
http://latobon.blogspot.com/2010/12/acerca-del-origen-del-apellido-tobon.html

Ahora bien, el tema es que esas plantillas nuevas tienen un montón de propeidades agregadas por defecto así que deberás colocar una propiedad extra para eliminar una de ellas. Buscas esto:

#menu ul.level2, #menu ul.level3 {
............
}

y allí dentro pones overflow: visible;

#menu ul.level2, #menu ul.level3 {
............
overflow: visible;
}

Responder
La Tobonera  

Hola JMiur

Excelente... agregue "overflow: visible;" y ahora funciona perfecto.

Te confieso que despues de los cambios y al ver que funcionaba, viví unos momentos indescriptibles de éxtasis, asombro y alegría total.

Eres un genio Jmiur y gracias de nuevo por tu tiempo y colaboración !

Slds,

Sergio

Responder
JMiur  

Perfecto :D

Esos momentos de éxtasis nos ocurren a todos. Siempre es un placer que algo funcione :D

Responder
Fherguzon Fletcher  

Este post tambien me sirvio. Gracias.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR