View Full Version : Show/hide toolbar menu on mouseover

31 Jul 2009, 10:52 AM
Hey guys,

I would like to show the menu automatically on mouseover and hide it on mouseout BUT I obviously don't want to hide it when the user mouses down into the menu from the toolbar button.

So I can attach a listener to the 'menutriggerover' event of the toolbar button and call its showMenu() function. That works fine. But if I similarly attach a listener to the 'mouseout' or 'menutriggerout' event of the toolbar button, it hides the menu not only when the mouse moves away from the button but also when the mouse moves down into the displayed menu. Not optimal for the user.

I have tried calling a couple of different functions on the passed EventObject - within() and getTarget() to try and determine if the mouse is actually over the menu when it moves away from the toolbar button but I can't seem to get either of those functions to tell me that its over the visible menu. It may be that the mouse is not actually moving directly over the menu when it first moves down out of the toolbar though from a visual standpoint it seems that it is.

Anyway, if someone has successfully implemented this feature I would very much appreciate some help.

Thanks and keep up the good work. Ext 3.0 is awesome!

31 Jul 2009, 1:52 PM
You are calling hide() on the mouseout listener when you don't want to?

3 Aug 2009, 3:31 AM
Well basically, I want to:
(a) show the menu when the mouse moves over the toolbar
(b) allow the menu to stay visible if the mouse moves down over it
(c) hide the menu if the mouse moves off of the toolbar and not over the visible menu

I may be trying for too much here but it seems like I've seen that type of navigation on some public web sites. Automatically showing the menu when the mouse moves over the toolbar allows the user to quickly see what they can do without having to click the toolbar button to see the menu. I just need to figure out a way to keep the menu visible when the mouse moves down over it, but hide it if the mouse moves somewhere else.

3 Aug 2009, 3:46 AM
Wouldn't that just be a mouseleave listener on the Menu Element?

3 Aug 2009, 3:52 AM
Wouldn't your Ext.ux.ProximityFader (http://extjs.com/forum/showthread.php?t=59251) work here?

3 Aug 2009, 4:00 AM
Might be a nice flourish to just fade as they move the mouse away instead of just irrevocably disappear!