Foros del Web » Programando para Internet » Javascript » Frameworks JS »

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

Estas en el tema de Menú con dropdown, me funciona! pero.. :P en el foro de Frameworks JS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 03/12/2010, 04:58
 
Fecha de Ingreso: febrero-2009
Mensajes: 580
Antigüedad: 15 años, 1 mes
Puntos: 13
Menú con dropdown, me funciona! pero.. :P

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!
__________________
¿ya conoces la red social de cocina? descubre y comparte recetas de cocina
TONIWEB, un programador web freelance
  #2 (permalink)  
Antiguo 03/12/2010, 09:19
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Menú con dropdown, me funciona! pero.. :P

fijate este plugin
http://cherne.net/brian/resources/jq...verIntent.html
  #3 (permalink)  
Antiguo 03/12/2010, 17:11
 
Fecha de Ingreso: febrero-2009
Mensajes: 580
Antigüedad: 15 años, 1 mes
Puntos: 13
Respuesta: Menú con dropdown, me funciona! pero.. :P

mmmmmmm... Pero esto ejectua solo sus propias funciones? o puedo definirlas? no lo entiendo muhy bien..
__________________
¿ya conoces la red social de cocina? descubre y comparte recetas de cocina
TONIWEB, un programador web freelance
  #4 (permalink)  
Antiguo 04/12/2010, 17:24
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 15 años, 4 meses
Puntos: 66
Respuesta: Menú con dropdown, me funciona! pero.. :P

puedes probar asi:

Código Javascript:
Ver original
  1. var timeOut = 0;
  2.  
  3. function menu_desplegable(){
  4. $("#menu ul li ul").css({display: "none"}); // Opera Fix
  5. $("#menu li").hover(function(){
  6.                 clearTimeout(timeOut);
  7.         $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  8. },function(){
  9.                 timeOut = setTimeout(function(){
  10.                      $(this).find('ul:first').css({visibility: "hidden"});
  11.                 }, 1000);      
  12. });
  13. }
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #5 (permalink)  
Antiguo 07/12/2010, 05:49
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: Menú con dropdown, me funciona! pero.. :P

fijate los parámetros

Código HTML:
Ver original
  1.     <head>
  2.         <title>Ejemplon</title>
  3.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  4.         <script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
  5.     </head>
  6.         <script type="text/javascript">
  7.             $( function (){
  8.                 $('#menu li a').hoverIntent({
  9.                     over: down,
  10.                     timeout: 1000,
  11.                     out: up
  12.                 });
  13.                 function down(){  $(this).next().slideDown(500)}
  14.                 function up(){ $(this).next().slideUp(500)}
  15.             });
  16.         </script>
  17.         <style>
  18.             #menu{list-style:none}
  19.             #menu>li{float:left; width:100px}
  20.             #menu ul{display:none}
  21.         </style>
  22.     <body>
  23.     <ul id="menu">
  24.         <li><a href="#" class="asd">Uno</a>
  25.             <ul>
  26.                 <li>1.1</li>
  27.                 <li>1.2</li>
  28.                 <li>1.3</li>
  29.             </ul>
  30.         </li>
  31.         <li><a href="#">Dos</a>
  32.             <ul>
  33.                 <li>2.1</li>
  34.                 <li>2.2</li>
  35.                 <li>2.3</li>
  36.             </ul>
  37.         </li>
  38.         <li><a href="#">Tres</a>
  39.             <ul>
  40.                 <li>3.1</li>
  41.                 <li>3.2</li>
  42.                 <li>3.3</li>
  43.             </ul>
  44.         </li>
  45.     </ul>
  46.     </body>
  47. </html>

Etiquetas: dropdown
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:57.