Question

I’m using a goog.ui.toolbar to create a horizontal navigation menu at the top of my site (maybe that’s my problem–am I using the wrong UI component?). I want it to work like YUI’s menubar, such that when you hover over any item in the toolbar, a drop-down menu appears, and when you mouseout of that menu, it disappears (the goog submenu expects you to click elsewhere in the document to get it to close).

I can’t for the life of me figure out how to do this. I’ve subclassed goog.ui.toolbar into my own class, and have monkeyed around for days trying to get it to do what I want, but have gotten nowhere. One thing I’ve learned is that the auto-hiding behavior I’m interested in is provided by goog.ui.submenu’s setHighlighted function, which overrides goog.ui.control’s setHighlighted function, which is the base class of goog.ui.menu, which does not hide the way I like. I’d like to override goog.ui.menu, but it’s spawned by a decorator factory, and I don’t want to have to subclass half the codebase.

Have any of you managed to figure out how to do this?

Thanks much!

Answer 1

This needs a bit of work, but it seems to be very close to what you want.

Psuedo Code

• Override mouseover event of each menu button inside the toolbar
• Whenever mouseover, open the menu
• Override mouseout event of each menu button in the toolbar
• Whenever mouseout, wait a half second. Check if any of children (menu
  items) are highlighted. If they are, wait another half second. If no
  children menu items are highlighted, then close the menu.

Code (probably needs small tweaking but it’s close)

//...
var m1 = new goog.ui.Menu();
//... create menu items ...

var b1 = new goog.ui.MenuButton('Add Jars', m1);
b1.handleMouseOver = function(e){
    b1.setOpen(true);
};
b1.handleMouseOut = function(e){
    setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
};


example.toolbar.hideMenu = function(b1, m1){
    var count = m1.getChildCount();
    var shouldClose = true;
    for(var i=0; i<count; i++){
        if(b1.isHighlighted()){
            shouldClose = false;            
        }

        if(m1.getChildAt(i).isHighlighted()){
            shouldClose = false;
        } else {
        }
    }
    if(shouldClose){
        b1.setOpen(false);
    } else {
        setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
    }
};