Aplicar pequeño delay a un dropdown con jquery

[norbertohdez]

Hola, tengo dropdown multinivel en CSS, funciona asi, sin JS sólo html y CSS. El asunto aquí es, nesecito mediante jquery darle un pequeño delay antes de que se escondan los submenues luego de hacer mouseout. Como mi formulario css no funciona con js no tengo una idea de como hacer esto.

Me imagino que primero deberé asignar la función de dropdown como si no funcionara con solo CSS y ahí darle ese dalay... algo asi segun yo... Aqui es donde necesito una pequeña orientación por dónde empezar :S Alguna idea?

Aquí mi css de menu haber si sirve de algo.

Código:

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:0;}
#menu ul li {margin:0 0 4px 0;}
#menu li {margin:0; padding:0; list-style:none;width:217px;height:34px;}
#menu li a {margin:0; padding:3px 20px 0 10px; list-style:none;width:187px;height:31px;display:block;}

#menu a {text-indent:-9999px;}

#menu ul ul li {margin:0; padding:0; list-style:none;text-indent:0px;width:235px;}
#menu ul ul li a {margin:0; padding:3px 20px 0 10px; list-style:none;text-indent:0px;width:205px;}
#menu ul ul ul li a {margin:0; padding:3px 20px 0 20px; list-style:none;text-indent:0px;width:195px;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;border: 1px solid #666;background: #fff;-moz-border-radius: 10px;}
#menu ul#toplevel {position:absolute; left:0; top:0;}

#menu a {display:block; font:normal 13px verdana,arial,sans-serif;line-height:22px; text-decoration:none;} 

#menu ul li:hover > ul {left:100%; margin-top:-34px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}
#menu ul ul li a {color:#492F18;font-weight: bold;} 
#menu ul ul li a:hover {color:#9dc435;} 
#menu ul ul li:hover > a {color:#9dc435;}
#menu ul ul li a.fly {background: url(../images/orange.png) no-repeat 95% 5px;}
#menu ul ul li a.fly:hover {background: url(../images/orange.png) no-repeat 95% 5px;} 
#menu ul ul li:hover > a.fly {background:url(../images/orange.png) no-repeat 95% 5px;}
#menu ul ul ul li a {background: url(../images/naranja.png) no-repeat 2px 7px;}

[jackson666]

Y si lo haces integro con jQuery y le das el delay que quieras?

- http://www.miguelmanchego.com/2009/d...e-ajax-jquery/
- http://designreviver.com/tutorials/j...dropdown-menu/
- http://www.sohtanaka.com/web-design/...rop-down-menu/
- http://www.1stwebdesigner.com/resour...enu-solutions/

[mayid]

Veo el CSS, pero quiero saber si ya implementaste jquery.

En jquery podes hacer por ejemplo un fadeOut:

$("#elemento").fadeOut("slow");

Slow y fast ( on un numero ) se refieren a la velocidad con que se esconden. Pueden ser los segundos que quieras.

En cuando a un delay previo a tomar acciones, usa setTimeout(); si es que no te basta con el efecto de jquery.

[norbertohdez]

@mayid, no no tiene aun nada de jquery porque jala sólo con HTML y CSS. Por ello es que no tengo idea como podría aplicarlo.


@jackson666 revisando las ligas que me pusiste, ahorita mismo te aviso que tal me fue.

Muchas gracias por su respuesta! ya los mantengo al tanto.

[mayid]

Sabiendo solo html y CSS te recomiendo que aprendas javascript llano, para comprender mejor jQuery. Antes el uso de frameworks venia de una necesidad de codigo crossbrowser, creo. Pero ahora jquery tiene tanto que ver con la generación de galerias de imagenes, etc, y es tan sencillo, que muchos pegan el salto e ignoran javascript Te conviene empaparte un poco:

Javascript a fondo
http://www.desarrolloweb.com/javascript/

DOM javascript
http://www.desarrolloweb.com/manuale...avascript.html

Manipulación del DOM:
http://www.maestrosdelweb.com/editorial/dom/