Menu show/hide using jquery

Question

This is a css of a menu

<span id="menu2">Menu 2</span>

CSS for the above div

#menu2_submenu{
    position:absolute; left:375px; top:35px; background-color:#111; height:50px; width:160px; color:#424242;
}

sub menu

<div id="submenu">
                        <div id="submenu1">submenu1</div>
                        <div id="submenu2">submenu2</div>
</div>

and the jquery code that goes with the above

$('#menu2').mouseover(function(){
                $('#submenu').show();
                });



$('#submenu').mouseleave(function(){
                    $('#submenu').hide();
                    });

When the mouse is over menu2 $('#submenu').shows, and when the mouse leaves $('#submenu'), $('#submenu').hides. Now this is fine, the issue, is when the mouse leaves menu2 whether the mouse enters submenu or not #menu2 should hide.

I cannot use mouseleave on both #menu2 and #submenu, how do I do it.

Thanks Jean

try this...I hope it will help it's a jquery plugin for hiding the data.. randomsnippets.com/2011/04/10/… — boyfromnorth
– boyfromnorth, Commented Feb 23, 2012 at 10:58

Mikhail Chernykh · Accepted Answer · 2010-07-25 20:20:41Z

1

Try to use a plugin, don't invent a bicycle: jQueryMenu

answered Jul 25, 2010 at 20:20

Mikhail Chernykh

2,69722 silver badges15 bronze badges

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

Comments

zimbatm · Accepted Answer · 2010-07-25 20:32:29Z

0

I'm not sure I understood your questions, but I'll let you know what I do generally in this kind of situation.

// First I block the event from bubbling up to the document
$("#menu2, #submenu").mouveover(function(ev) { ev.stopPropagation(); } 

// Then, when entering the #menu2, show the #submenu, but also install a listener
// for the rest of the document to hide the #submenu.
$("#menu2").mouseenter(function() {
  // Going back from submenu to menu should do nothing (make sure to not leave a gap)
  var submenu = $("#submenu:hidden");
  if (submenu.length > 0) {
    submenu.show(); // Only if it's hidden
    $(document).one("mouseover", function() {
      submenu.hide();
    });
  }
});

answered Jul 25, 2010 at 20:32

zimbatm

9,4084 gold badges23 silver badges11 bronze badges

Collectives™ on Stack Overflow

Menu show/hide using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related