Re-Hover doesn't work with 'bottom' settings (in Shopware)

[MLK97]

I use the plugin to display submenu points on the bottom side of the navigation.
It works perfectly, but if I

1. hover over a point
2. move mouse downwards until i am outside of the submenu and menu
3. then go back to the just hovered menu point

the plugin doesn't execute.

Haven't found a workaround, yet. Maybe it is just because of the framework (Shopware) I use

[MLK97]

Problem exists because the activate function gets executed but the deactivate function doesn't get executed

[rossmedia]

This bug is a general bug and not related to bottom setting or Shopware.

The bug also exists in the offical demo under:
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html

Steps to reproduce:

• Open https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
• Click on "Explode the monkeys" to open sub menu
• Mouse over over any of the menu items, let's say "Patas"
• Move your mouse out to the left and click anywhere on the page so the dropdown will be closed
• Click again on "Explode the Monkeys" to open sub menu
• Mouse over over the "Patas" again

Expected result

• Drop-Down for "Patas" should open

Current result

• Drop-Down does not open

[stevepiron]

Quite annoying indeed. I've just found out about this bug, which makes the plugin not a good fit for production.

[stevepiron]

I've just found a workaround. It isn't ideal but it works:

/**
 * @function `init`
 *
 * Initializes the desktop navigation behavior.
 *
 * 1. Hide the panel on exit.
 */
function init() {
    $navBar.menuAim({
        rowSelector: navGroup,
        activationDelay: 0,
        activate: function(el) {
            showNavPanel(el);
        },
        deactivate: function(el) {
            hideNavPanel(el);
        },
        exit: function(el) {
            hideNavPanel(el); /* [1] */
        },
        submenuDirection: 'above'
    });
    is_desktop_nav = true;
    enableClickOnPanelLabel();
}

/**
 * When leaving the panel, unbind the mouseenter event
 * and initialize menuAim again. Not ideal as it doesn't destroy
 * the first instance.
 */
$navPanel.on('mouseleave', function(e) {
    e.preventDefault();
    $navGroup.unbind('mouseenter');
    init();
});

So basically: hide the nav panel on exit, bind a mouseleave event to all panels and initialize menuAim again.

[MLK97]

I tried your workaround and it does the job just fine. You basically just double force it. In my own workaround I made it exactly like that, even though it wasn't as elegant as yours.
Hopefully someone will solve this issue

[youngjuning]

same issue

[heun01]

The mouseleaveMenu function only triggers the deactivate function, if the exitMenu option is supplied and returns true:

`
$('.module-nav .module-nav__lvl1').each(function () {
var $menu = $(this);
$menu.menuAim({
activate: activateSubmenu,
exitMenu: deactivateSubmenu,
submenuDirection: "below"
});
});

function activateSubmenu(row) {
var $row = $(row);
$row.addClass('-hover').siblings().removeClass('-hover');
}

function deactivateSubmenu(row) {
var $row = $(row);
$row.find('> .module-nav__item').removeClass('-hover');
return true;
}
`

[stevepiron]

@heun01 is that how you suggest to fix it? 🤔

[heun01]

Yeah works for me.

[jakedowns]

I had the same issue and I had overlooked this comment on exitMenu in the example config

if you have a exitMenu option, it needs to return true

// Function to call when mouse exits the entire menu. If this returns
// true, the current row's deactivation event and callback function
// will be fired. Otherwise, if this isn't supplied or it returns
// false, the currently activated row will stay activated when the
// mouse leaves the menu entirely.
exitMenu: function (row) {
    return true;
},

[MBWebTechMariusz]

I've had the same issue, and wanted to share the complete solution:

exitMenu: function (row) {
    return true;
},

This should be added in the docs, so other people can easily use this in their projects.

[rossmedia]

@MBWebTechMariusz Thanks! We had no exitMenu callback implemented so we just added a function like you did and with that it works fine. I think there should be some workaround implemented which fixes that bug and let exitMenu return true by default, even if no callback is implemented.

[MBWebTechMariusz]

@rossmedia I think this is not the intended behaviour, see this post: #50 (comment)
Because of this, I think it is better to make this option as an "opt-in"-option, rather than the default.

What do you think?

[rossmedia]

@MBWebTechMariusz Oh yes sorry now i understand the problem. When i implement your solution the benefit of this plugin (work like amazons menu and don't close when you) is not working anymore. :(

[MBWebTechMariusz]

Yeah, this is a drawback. But I think this is intended, so we need to try it with just

exitMenu: function (row) {
    return true;
},