PDA

View Full Version : Navigation Menu Behavior



fsa3
1 Jun 2009, 6:53 PM
I have a menu that shows up when you hover over a link. I implemented it using:

Ext.get('maplink').on('mouseover',function(){mapMenu.show('maplink');});

After my first attempt, I realized the menu only disappeared when you clicked somewhere on the screen, but I wanted it to behave more like the nav bar on this site (when you move the mouse off the link OR menu it goes away. So I added:

Ext.get('maplink').on('mouseout',function(e){
if (!e.within(mapMenu)){
mapMenu.hide('maplink');
}
});

This causes the menu to go away instantly (after moving off the link) - making it impossible to select anything.

What is the best way to implement a simple menu that will disappear when the mouse is moved from the link AND the menu itself? I found the code on the link below but before implementing something like that I wanted to see if there was a simpler way.

http://extjs.com/assets/js/site.js?v=4

Thanks,
Frank

Animal
1 Jun 2009, 11:42 PM
Check if e.within(theMenuElement)

If it is, then don't hide the menu.

Then, you have to consider do you need a mouseleave handler on the Menu element to hide it as soon as the mouse leaves the menu? (perhaps with the converse check that you haven't just moved the mouse back over the link)