07 May

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:

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

One thought on “closing a filament-group menu on mouseout

Leave a Reply