JMiur [E]

Este no será un post muy explicativo porque no hay mucho que explicar. Se trata de dos scripts muy livianas creadas por leigeber.com que permiten crear menúes desplegables con un efecto de fade y que funcionan bastante bien en cualquier navegador. Un script lo usamos para crear menues horizontales y el otro, menues verticales.

Para los menúes horizontales podemos usar este ZIP que incluye un demo aunque lo único necesario es el archivo dropdown.js que alojaremos en una servidor y cargaremos antes de </head>
<script type="text/javascript" src="URL_dropdown.js"></script>
Luego, incluiremos el CSS que podrá variar de acuerdo a nuestros gustos, pero algunas de las propiedades principales son estas:


<style type="text/css">
.dropdown {
float:left;
padding-right: 5px;
}
.dropdown dt {
width:125px;
cursor:pointer;
}
.dropdown dt:hover {
}
.dropdown dd {
display: none;
opacity: 0;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 200;
}
.dropdown ul {
list-style: none;
margin: 0;
padding: 0 0 0 10px;
width: 200px;
}
.dropdown li {
display:inline;
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
padding:5px;
width:170px:;
}
.dropdown a:hover {
}
</style>
Para usarlo, debemos armar una lista donde cada item tendrá un código similar a este:
<dl class="dropdown">
<dt id="nombre-ddheader" onmouseover="ddMenu('nombre',1)" 
onmouseout="ddMenu('nombre',-1)">Texto del menú</dt>
<dd id="nombre-ddcontent" onmouseover="cancelHide('nombre')" 
onmouseout="ddMenu('nombre',-1)">
<ul>
<li><a href="URL_item1">Item 1</a></li>
<li><a href="URL_item2">Item 2</a></li>
<li><a href="URL_item3">Item 3</a></li>
<li><a href="URL_item4">Item 4</a></li>
</ul>
</dd>
</dl>
Pueden tenerse tantos de estos bloque como sea necesario y sólo debemos tener en cuenta que el ID sea diferente para cada uno de ellos.

Para crear un menú vertical podemos usar este otro ZIP que también incluye un demo y donde todo lo necesario es el archivo flyout.js que alojaremos en una servidor y cargaremos antes de </head>
<script type="text/javascript" src="URL_flyout.js"></script>
Luego, incluiremos el CSS que es similar al anterior, la única variante es que en lugar de definir la clase dropdown como flotante:
.dropdown { /* para el menú horizontal */
float:left;
padding-right: 5px;
}
la definimos como un bloque y establecemos su posición como relativa:
.dropdown { /* para el menú vertical */
display: block; 
position:relative
}
El resto es exactamente igual.

39 comentarios:

Anónimo  

Bueno el efecto, aunque algo lento (¿se podrá configurar la velocidad?).

Yo lo que quería saber y ahora consulto es si hay alguna manera de configurar el acordeón con supongamos un listado de últimas entradas (feed).

Es que lo intenté pero no me dio el mate (o la paciencia). Usé el código que da Feedburner, pero me fue imposible configurar bien las medidas de las solapas.

De antemano gracias.

Se nos fue un "e" en el título del post ;)


¡Saludos!

Responder
JMiur  

Fernando:
Sí, se puede modificar la velocidad, veré si lo hago. Lo probé en un borrador y parecía bien pero claro, en el blog completo es más lento.

Lo de las solapas, imagino que se puede hacer pero parece que el problema es gráfico así que debería verlo online en alguna parte para contestar.

Menús VS Menúes. Bah, la RAE dice una cosa: "desaconseja" el uso de menúes. A mi, en lo personal, menús me suena muy mal. :$

Responder
Biblioteca Teatral El Público  

JMiur: muy interesante el tema de los menúes. Voy a poner en mis taresa pendientes este cambio. Gracias
marisol

Responder
Anónimo  

Bueno pero muy lento el menú ojala pueda mejorarse.

Responder
Anónimo  

Está muy bien JMIUR. A ver si puedes hacer una explicación de como conseguir que se muestre siempre la fecha del post(aunque se hayan publicado 2 o más el mismo día).

Responder
Anónimo  

XD

No te preocupes por lo de las solapas... opté por no hacerlo. Creo que aplicaré nomás el menú vertical (que me resulta algo más sencillo y mejor a la vista en realidad).

Menús VS Menúes. Menúes me suena rarísimo... Es que veo la "e" muy innecesaria allí. :)

Responder
JMiur  

El tema de estos efectos es siempre una experimentación, no mucho más.

Veré si puedo escribir algo sobre el tema de las fechas pero puede ser engorroso porque dependerá mucho e las plantilla. Se necesita JavaScript para eso. Prometo hacerlo.

Fernando, las solapas de ese estilo están bien pero tienen un uso limitado, sin duda, lo mejor es un menú.

¡Qué tema el de las palabra! Ayer, alguien me decía "usa la palabra Listas" ¡Qué se yo!

Como dijo alguien, los latinos somos un conjunto de países separados por el mismo idioma :D

La solución es sencilla. De ahora en adelante, hablaré sólo de un menú por vez y terminaremos con estas paradojas de los plurales :D

Responder
Anónimo  

Sí, sí... así en vertical es más sencillo y adaptable.

Hay una explicación sencilla por la que la RAE no recomienda el uso de "menúes" al referirse al prural de "menú":

Menú viene del francés menu. Según leía en WordReference (creo), la regla de "es" después de "u" [ejemplo: tabú- tabúes] no se aplica.

¿Será?

Menúes suena raro. Quizás y estoy muy americanizado (?)


[...]

Listas está bien.
XD

Responder
JMiur  

Dejémoslo en Listas o en "ese coso que está ahí arriba y que nos permite seleccionar algo que nunca está ahí sino en otra parte" :D

Responder
Unknown  

Esta muy bueno, voy a ver si lo pruebo en el blog!!!. Si quieren aca les dejo la direccion por si se quieren meter a leer algo de relaciones públicas, marketing y publicidad!!!
http://neocomunications.blogspot.com

Responder
Anónimo  

hola....tengo un pequeño problema con el menu desplegable vertical. Al implementarlo, el menu que se despliega se ve detrás de las otra divisiones. Este problema lo tengo solo con IE, con firefox funcione sin problemas.
Alguna recomendacion para solucionar esto.

saludos

Responder
JMiur  

No veo ese problema en IE7, deberías mostrarme un ejemplo online.

Responder
Anónimo  

Todavia no subo la pagina, te puedo enviar un pantallazo para que veas el ejemplo.

saludos

Responder
Gem@  

Hablando de IE7 J.Miur ¿por qué pierde el efecto el script de animatedcollapse.js y con Firefox se ve divino?

Responder
JMiur  

Una imagen no serviría, hay que verlo funcionando dentro del navegador.

Gem@: en tu blog veo que funciona bien, tanto en la sidebar como en el footer.

Responder
Anónimo  

aca te mando el link para que puedas observar el problema.
http://www.nelquimapu.cl/Nelquimapu/Index.php

saludos

Responder
JMiur  

Realmente es complejo de seguir sobre todo en IE ya que no hay muchas herramientas para eso.

¿has probado con otros valores de .dropdown dd?

Responder
Anónimo  

estimado, hice un cambio para que se viera mejor...no es lo que mas me gusta visualmente, pero igual es comodo y cumple su objetivo.
Si por casualidad lograr resolver el problema, no dudes en avisarme.

saludos

Responder
Anónimo  

jajajaj...justo despues de que hice ese post, descubri el real problema...las divisiones que se superpone el menu desplegable deben estar sin "postion:relative", solo con float....con eso se soluciona el problema.

saludos

Responder
Anónimo  

Hola, tengo una pregunta sobre el menu desplegable vertical. Como puedo hacer para que de un menu que se despliega, se despliegue otro menu mas...valga la redundancia. :D

Responder
JMiur  

Ese tip ode scripts o CSS es bastante complejo de hacer. Fíjate en Dynamic Drive donde hay varios modelos.

Responder
Catx  

Hola JMiur. Una pasada de explicación y de menú, pero tengo un problemilla.

He seguido todos los pasos, he personalizado los colores, etc... pero resulta que dicho menú funciona si visito mi blog con Firefox, pero si lo hago con IE6 el menú no se activa, solo se ven las opciones principales sin que se despliege.

¿A q puede ser debido? He copiado el archivo .js en mi ftp , lo cargo en el html justo antes de /head tal y como dices, y el codigo html del menu lo he creado a partir del q nos ofreces en el archivo .txt

He buscado por la red y veo que dicha función puede tener problemas con IE6 . ¿Que solución puede tener dicho problema?

AH! y lo q me "pica" es que visito tu web con ambos navegadores y el menu q tienes de ejemplo se ve sin fallos............... snif... :(

Puedes ver el blog de prueba con el menu aquí:

http://catxphoto.blogspot.com

Gracias de antemano.

Responder
JMiur  

Catx:

Me parece que el problema está en que, al colocar el menu en la plantilla, hay una cosa que Blogger cambia y que hace que IE no la lea bien.

Por l oque pude proabr en un blog de pruebas, copiando y pegando el mismo ejemplo, al guardarse, la plantilla cambia las comillas interiore por su equivalente &apos; lo que hace que no funcione.

Entonces, busca y cambia en la plantilla misma, ese dato: &apos; y reemplázalo por &quot;

En un leguaje normal, seria lo mismo que usar comillas dobles en lugar de comillas simples. No así:
onmouseout='ddMenu('uno',-1)'
sino así:
onmouseout='ddMenu("uno",-1)'

Espero que la explicación se comprenda. Lo he djado puesto para que lo chequees en IE6 pero, en IE7 tampoco funcionaba y con ese cambio, ahora lo hace.

Responder
Anónimo  

Muchas gracias JMiur, como decimos por aquí "ets un crack!!!" jejeje Lo pruebo ahora mismo y te digo. Un saludo!!

Responder
Anónimo  

juas!!!! Gracias de nuevo JMiur!!! con el cambio de &apos por &quot funciona correctamente, tanto con IE6 como IE7 (y Firefox, claro ;) y el rendimiento del menu a la hora de desplegarse noto como si lo hiciera mas fluido.

Un saludo y FELICIDADES POR TU TRABAJO!!

Responder
JMiur  

Me alegro, Catx. Como todos los ejemplos los había puesto en un post, no noté que ocurriera eso :D

Responder
Catx  

Por cierto, otra cosa q veo. Si hago q el color de los botones sea un color # y otro para cuando pasas el raton por encima, se cambia bien, pero si hago q el fondo de boton sea un .gif y cambie al pasar el puntero por otro .gif, con firefox funciona bien pero con IE no ¿? Me he mirado el menu q tienes de ejemplo y tambien pasa (al menos dsd mi pc con IE6 y firefox). ¿Otra jugada de blogger? o es IE q es un poco cortito?

Responder
JMiur  

No. Eso no es Blogger. Puede ser IE6.

Voy a limitarme a la imagen del menú principal y no a los submenues ya que es lo que veo más claro. Si miro este post en IE7, el efecto onmouseover cambia la imagen perfectamente (es la misma pero más oscura) ¿Eso no se logra ver en IE6? Es algo que no puedo probar.

En el caso de tu ejemplo no veo ese efecto o no lo alcanzo a distinguir ya que las dos imágenes o son iguales o muy similares. Me refiero a las que están en:
.dropdown dt {.....
.dropdown dt:hover {.....

Si en el caso de este post no ves el efecto, ahí caemos en una limitación del mismo IE6. Si lo ves, entonces cambia alguna de las imagenes esas por otra más diferenciada aunque sea temporalmente. Lo que veo del código es correcto.

Responder
Catx  

Nop, en mi menu tengo la misma imagen en los dos casos ya que si ponia una diferente, con IE6 no funciona pero con firefox si, y lo deje estar. Tal y como comentas, seguramente será una limitación de IE6. Muchas gracias JMiur. Un saludo!!

Responder
JMiur  

Saludos, Catx. Sí parece ser una limitación del mismo navegador.

Responder
Anónimo  

hola tengo una duda acerca de esto, yo lo que quiero hacer es una lista con videos de youtube y lo que me gustaría hacer es poner una lista con los titulos de los videos y cuando uno hace click en alguno de los titulos se despliega el video, es posible hacer esto?

Responder
JMiur  

Si. es posible. Necesitas algún script que abra ventanas modales, no sé si usas alguno.

Responder
Anónimo  

Instalé unos scripts Prototype y Scriptaculous pero no funcionan, cuando hago click en el link no se depliega el video. Los instalé de acuerdo a lo que dice acá http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html pero no hay caso

Responder
JMiur  

Marbel:
Los scripts no se cargan.El navegador dice:
Failed to load source for: http://wiki.script.aculo.us/javascripts/prototype.js
el archivo no existe.
LA forma más sencilla de cargar esas librerías es usando las de Google. Fíjate en esta entrada.

Responder
Anónimo  

y no se puede hacer que se deslize pero en tu propio menu? si tener que poner justo ese?

Responder
JMiur  

Si haces un script personal o le colcoas las propiedades CSS adecuadas, seguramente si.

Responder
Anónimo  

como puedo hacer eso? se mui poco de scripts y CSS :S

Responder
Unknown  

Hola, quisiera saber si es posible que el menu horizontal se despliegue hacia arriba,pues me gustaria implementar el menu en una web en la parte inferior. ¿es posible?

Ahora bien, si es posible hacerlo ¿tambien se podria hacer un submenu que se despliegue horizontal? es decir, el menu de despliega hacia arriba y el submenu hacia el lado.

Quedo muy atento a sus comentarios, gracias.

Responder
JMiur  

Para eso no hay otra alternativa que modificar el script.

Responder

¿Quiere dejar un comentario?

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

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