Rollover navigation

[kevboy]

I have a horizontal navigation bar with several Labels acting as links. I would like it so that when the user rolls over a Label, a menu appears and the user can choose a sub-link (like the navigation of the smartclient.com site).

I can get the menu to show but I can't get it to hide when I mouse out of the label. The dev console shows the mouse out events occurring too. Also, I noticed that none of the other label rollovers work when a menu is shown.

I also tried setting the mouse out handler on the menu, which worked in that I had to mouse over the menu and then out of it. But if I mouse over just the label then mouse over to the adjacent label (w/o going into the menu), nothing happens.

It seems like showing the menu is blocking other handlers on the labels from executing.

This is my code:

label.addMouseOverHandler(new MouseOverHandler() {
    
    @Override
    public void onMouseOver(MouseOverEvent event) {
        Log.debug("label onMouseOver");
        menu.showNextTo((Canvas) event.getSource(), "bottom");
    }
});
label.addMouseOutHandler(new MouseOutHandler() {

    @Override
    public void onMouseOut(MouseOutEvent event) {
        Log.debug("label onMouseOut"); // never displayed
        menu.hide();
    }
});

[Isomorphic]

This is due to a "clickMask" being shown when the menus are shown which essentially blocks interaction with other elements on the page while the menu is up.
Two options here:

1) Use the built in MenuBar class which already handles what it sounds like you're trying to achieve.

2) Un-mask the entire horizontal layout when the menu is shown so it continues to receive mouse events. You can do this via a call to "bringToFront" on the layout once the menu has been drawn.