closing a filament-group menu on mouseout

The filament group menu plugin is one of the better ones out there.

But it has a few flaws. One of the major ones is that they’re not developing it anymore, leaving that to the jQuery UI team. But, development on that is really painfully slow… I don’t expect to see a working menu for months. Even the demos linking from the jQuery UI Menu page are hardly inspiring – they’ve got practically no functionality at all. Hardly useful.

For that reason, I’m okay with taking the current fgmenu code and extending it.

Here’s a simple fix, which has been asked for on their blog. I can’t comment on it because comments are closed.

To close menus onmouseout, all you need to do is to add a mouseout to all menu items, and if it’s triggered, then a second or so later, close all menus.

Obviously there’s a little more to it than just that. Read the code if you want the full details.

Just add this bit to your fg.menu.js file:

[javascript]
$(‘.fg-menu,.fg-menu-top-level’)
.live(‘mouseover’,function(){
this.mouse_is_over=true;
clearTimeout(window.fgmenu_mouseout_timer);
})
.live(‘mouseout’,function(){
this.mouse_is_over=false;
window.fgmenu_mouseout_timer=setTimeout(function(){
var o=0;
$(‘.fg-menu,.fg-menu-top-level’).each(function(){
if (this.mouse_is_over) o++;
});
if(!o){
$.each(allUIMenus, function(i){
if (allUIMenus[i].menuOpen) { allUIMenus[i].kill(); };
});
}
},2000);
});
[/javascript]

One Reply to “closing a filament-group menu on mouseout”

Leave a Reply