Hide dropdown menu jquery

Question

Well I have a simple question for those who knows jQuery. First of all, I have this HTML code:

<div id="Layer-69" class="nav-bar nav-links"  >
  <a href="#" title="NOSOTROS" class="nosotros">NOSOTROS</a>
</div>
<div id="nosotros-menu">
  <ul>
    <li><a href="#" title="Quienes Somos?">Quienes Somos?</a></li>
    <li><a href="#" title="Reseña Historica">Reseña Historica</a></li>
    <li><a href="#" title="Nuestra Filosofia">Nuestra Filosofia</a></li>
  </ul>
</div>

And this jQuery code:

$(document).on('ready', function(){
   $('.nosotros').on('mouseover', function(){
        $('#nosotros-menu').slideDown('fast');
   });
});

What I have right now is that when I put the mouse over the "nosotros" a element, it shows the "nosotros-menu" div element. Now, what I want to do is that when the pointer leaves the "nosotros-menu" div, this div just hide, but I can't do it, I don't know how. please help me, thank's.

mgraph · Accepted Answer · 2012-08-31 00:18:19Z

1

try this:

$(document).on('ready', function(){
   var timeout = 0;
   $('.nosotros').hover(function(){
        $('#nosotros-menu').slideDown('fast');
   },function(){
         timeout = setTimeout(hideMenu,300);
    });

   $("#nosotros-menu").hover(function(){
       clearTimeout(timeout);
   },function(){
       hideMenu();
   });
});

function hideMenu(){
    $("#nosotros-menu").slideUp('fast');
 }

edited Aug 31, 2012 at 0:18

answered Aug 31, 2012 at 0:02

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrés Orozco Over a year ago

Thank you so much!!! It worked!... I really appreciate this. But I just have another question, it work when I hover over the #nosotros-menu element, but when I just hover over the .nosotros element the #nosotros-menu stays there until I hover it and after that it hide.

box86rowh Over a year ago

You might also look into the hover intent plugin, this will handle the delay for you so that you dont need to do the timeout part of it.

kinakuta · Accepted Answer · 2012-08-30 23:56:48Z

0

Instead of using the mouseover event, bind to the hover event. With hover, you supply two functions, one for when the user's mouse enters, and one for when it leaves, and jquery wires it up for you. Inside the first function, do the slideDown action, then in the second one, the slideUp action.

answered Aug 30, 2012 at 23:56

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

1 Comment

Andrés Orozco Over a year ago

Could you explain it a little bit more?

Diego Garcia · Accepted Answer · 2012-08-31 00:07:36Z

0

You can do just like that:

$(document).on('ready', function(){
   $('.nosotros').hover(
     function () {
       $('#nosotros-menu').slideDown('fast');
     }, 
     function () {
       $('#nosotros-menu').slideUp('fast');
     }
   );
});

answered Aug 31, 2012 at 0:07

Diego Garcia

1,1441 gold badge12 silver badges25 bronze badges

Collectives™ on Stack Overflow

Hide dropdown menu jquery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related