CODEWITHSUNDEEP
jquery
user1184100
user1184100

Reputation: 6894

Custom Dropdown menu mouseleave issue

I have 2 div's one contains "clickable div" and other "nav_menu" which is menu. There is a mouseleave function implemented for "#clickable_div" my problem is when i hover over the menu it should not slideUp which is currently happening How can i fix this ?

Note : I'm using a small plugin for dropdown

JSFiddle - > http://jsfiddle.net/HtNK3/13/

Code

$(document).ready(function() {
    var visible = false;

    $('#clickable_div').click(function() {
      visible = true;
      $('#nav_menu').showMenu({
            parent:'#clickable_div'
      });                
    }).mouseleave(function() {

    if(visible) {
        visible = false;
        window.setTimeout(function(){$('#nav_menu').hide('blind');}, 1000);
    }
    });       //end mouseleave     

    $('#l1').click(function() {
    alert("...");               
    });  
});

Upvotes: 0

Views: 781

Answers (2)

rgin
rgin

Reputation: 2311

my problem is when i hover over the menu it should not slideUp which is currently happening How can i fix this ?

Then don't hide the box on mouseleave. Remove all this:

.mouseleave(function() {

    if(visible) {
        visible = false;
        window.setTimeout(function(){$('#nav_menu').hide('blind');}, 1000);
    }
 })

EDIT:

The simplest way I could think of is to wrap the whole thing inside another block element and bind the mouseleave event to that. I've updated your Fiddle to show the solution.

http://jsfiddle.net/HtNK3/20/

Upvotes: 2

Sandeep Manne
Sandeep Manne

Reputation: 6092

Following code is causing problem,

     .mouseleave(function() {
        if(visible) {
            visible = false;
            window.setTimeout(function(){$('#nav_menu').hide('blind');}, 1000);
        });

What you are trying to do is when the mouse leave the menu header your are asking to hide the menu.

Try to detect mouse out on both the menu header and menu. Check this answer on how to do that

Js Code

There are lot of plugins already available to do this take any one of them and change the css to match your site

Upvotes: 0

Related Questions