Nested Menu not closing on hover out

[dashawk]

I have a nested menu example here.

The issue is that, when you hover to a nested menu item, it will display the sub menu items, but if you hover to another menu item which is not a nested menu, then recently opened sub menu of the previous menu is still open.

Is there a way to close the sub menus if we hover away to the parent menu item?

[Templarian]

Yea, I'm coding a fix for this before the next release (next release will include #4's changes in it also).

[dashawk]

Hi,

I just solved the issue.

I just updated this block (Temporary Fix):

$li.on('mouseover', function ($event) {
    $scope.$apply(function () {
        if (nestedMenu) {
            openNestedMenu($event);
        } else {
            $(event.currentTarget).removeClass('context');
            removeContextMenus(level + 1);
        }
    });
});

Here is what My menu Looks like:

[madmas]

@dashawk, I adapted your snippet into a PR :-) @Templarian do you think thats sufficient or did you have another solution in mind?

[Templarian]

@madmas I had a slightly different solution (very similar actually), but It involves waiting 0.5 seconds of hover off to close the menu similar to how it works on desktop, but I need to test the idea to make sure it works on touch okay.

This allows the mouse to quickly move off and back on without instantly closing the menu.

[KuroNoDev]

any luck with this?

[dashawk]

Thanks guys for the inputs. I will close this issue now but if you have any other additions, feel free to reopen.