CODEWITHSUNDEEP
jquerydrop-down-menu
Andrés Orozco
Andrés Orozco

Reputation: 2661

Hide dropdown menu jquery

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.

Upvotes: 1

Views: 551

Answers (3)

mgraph
mgraph

Reputation: 15338

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');
 }

Upvotes: 1

Diego Garcia
Diego Garcia

Reputation: 1144

You can do just like that:

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

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

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.

Upvotes: 0

Related Questions