Menú con dropdown, me funciona! pero.. :P

Bam_Margera · #1 (**permalink**) 03/12/2010, 04:58

Hola!

Estoy descubriendo Jquery y estoy flipando de lo versatil que es...

bien, mi dropdown lo hago así

Código:

function menu_desplegable(){
$("#menu ul li ul").css({display: "none"}); // Opera Fix
$("#menu li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

PREGUNTA: como puedo hacer que para si el usuario sin querer se sale de la lista que se despliega espere X tiempo antes de esconderse? (para que le de tiempo a volver sin tener que ir al 'padre' de nuevo)

Eso sería ya perfecto, cómo puedo hacerlo?

Muchas gracias!

Dany_s · #2 (**permalink**) 03/12/2010, 09:19

fijate este plugin
http://cherne.net/brian/resources/jq...verIntent.html

Bam_Margera · #3 (**permalink**) 03/12/2010, 17:11

mmmmmmm... Pero esto ejectua solo sus propias funciones? o puedo definirlas? no lo entiendo muhy bien..

tredio · #4 (**permalink**) 04/12/2010, 17:24

puedes probar asi:

Código Javascript:

Ver originalvar timeOut = 0;
 
function menu_desplegable(){
$("#menu ul li ul").css({display: "none"}); // Opera Fix
$("#menu li").hover(function(){
                clearTimeout(timeOut);
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
                timeOut = setTimeout(function(){
                     $(this).find('ul:first').css({visibility: "hidden"});
                }, 1000);       
});
}

Dany_s · #5 (**permalink**) 07/12/2010, 05:49

fijate los parámetros

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
    </head>
        <script type="text/javascript">
            $( function (){
                $('#menu li a').hoverIntent({
                    over: down,
                    timeout: 1000,
                    out: up
                });
                function down(){  $(this).next().slideDown(500)}
                function up(){ $(this).next().slideUp(500)}
            });
        </script>
        <style>
            #menu{list-style:none}
            #menu>li{float:left; width:100px}
            #menu ul{display:none}
        </style>
    <body>
    <ul id="menu">
        <li><a href="#" class="asd">Uno</a>
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li><a href="#">Dos</a>
            <ul>
                <li>2.1</li>
                <li>2.2</li>
                <li>2.3</li>
            </ul>
        </li>
        <li><a href="#">Tres</a>
            <ul>
                <li>3.1</li>
                <li>3.2</li>
                <li>3.3</li>
            </ul>
        </li>
    </ul>
    </body>
</html>