CODEWITHSUNDEEP
jquery
morleyc
morleyc

Reputation: 2431

Auto-close div after mouse is outside menu area for longer than n seconds

For a list below:

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

A div is expanded by clicking on it, with the below code:

$(function(){
    $('#top-nav span').click(function(){
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq('+divTrigger+')');
        $('.megamenu').slideUp(100);
        if(thisMegaMenu.is(":not(':visible')")){
        thisMegaMenu.slideDown(200);
        }
});
});

What I would like is for the div dropdown to close if the mouse moves outside of the menu area for more than an arbitrary number of seconds (either moving outside of the top-nav div area, or moving outside of the currently dropped down div).

Online demo is here (note this is a forked demo of other code that had a close button): http://jsfiddle.net/KY9gr/ please note I have edited this form my original post to be a horizontal menu.

I am a C# programmer trying to get my head around jQuery examples so I appreciate the patience and guidance.

Upvotes: 3

Views: 917

Answers (2)

adeneo
adeneo

Reputation: 318182

I'm guessing something like this :

$(function () {
    $('#top-nav').on({
        mouseleave: function(e) {
            $(this).data('timer', setTimeout(function() {
                $('.megamenu').slideUp(200);    
            }, 1000));
        },
        mouseenter: function(e) {
            if ( $(e.target).closest('#top-nav').length ) {
                clearInterval( $(this).data('timer') );
            }
        }
    }).find('span').on('click', function () {
        var divTrigger = $('#top-nav span').index(this),
            thisMegaMenu = $('.megamenu:eq(' + divTrigger + ')');
        $('.megamenu').slideUp(200);
        if (thisMegaMenu.is(":not(':visible')")) {
            thisMegaMenu.slideDown(200);
        }
    });
});

FIDDLE

Upvotes: 2

BeNdErR
BeNdErR

Reputation: 17929

have a look here: http://jsfiddle.net/4jEMu/3/

is this the behaviour you want?

code

$(function () {
    $('#top-nav span').click(function () {
        var clicked = $(this);
        var timer;
        divTrigger = $('#top-nav span').index(this);
        thisMegaMenu = $('.megamenu:eq(' + divTrigger + ')');
        $('.megamenu').slideUp(200);
        if (thisMegaMenu.is(":not(':visible')")) {
            thisMegaMenu.slideDown(200);
        }
        $('#top-nav span').mouseenter(function () {
             if (timer) clearTimeout(timer);
        });


        $('#top-nav span').mouseleave(function () {
            timer = setTimeout(function () {
                $('.megamenu').slideUp(200);
                timer = 0;
            }, 1000);
        });
    });

});

Upvotes: 1

Related Questions