Custom Dropdown menu mouseleave issue

Question

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("...");               
    });  
});

Your code is working exactly as its supposed to. Its just not what you want. So, what do you want exactly? — rgin
– rgin, Commented Apr 6, 2012 at 7:39
when i click the div , menu show's up. When i move the mouse over the menu it should not close up..which is happening currently. — user1184100
– user1184100, Commented Apr 6, 2012 at 7:41

rgin · Accepted Answer · 2012-04-06 07:57:32Z

2

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/

edited Apr 6, 2012 at 7:57

answered Apr 6, 2012 at 7:42

rgin

2,3014 gold badges24 silver badges33 bronze badges

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

2 Comments

user1184100 Over a year ago

well i want it to hide out but not when the mouse is over the menu or when the mouse is over the "clickable_div".

rgin Over a year ago

Then, say that in your question. That's what I meant by "What do you want to do exactly?". Let me update my answer.

Community · Accepted Answer · 2017-05-23 11:56:27Z

0

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

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Apr 6, 2012 at 7:45

Sandeep Manne

6,0825 gold badges41 silver badges55 bronze badges

Collectives™ on Stack Overflow

Custom Dropdown menu mouseleave issue

Code

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related