Hi, I'm trying to get the drop down to work that appears below the main menu; however when I move the mouse from the main menu to the sub menu it disappears. I've put it on a test page here...

http://uk.monsoon.co.uk/view/content/ip-test

I've tried changing the top position and integrating some of the other pull requests on here but nothing has worked as if yet so any thoughts or suggestions would be appreciated! Code is below and can also be viewed on the source code of the page...Many thanks in advance

I know there is a topic allready, but it is very old and no one replied. Has anyone of you successfully implemented a multi level navigation with menu aim? The example has only one level, and I have at least there to deal with, its for category browsing with many child and grandchild categories. But Nesting menuAim into itself does not seem to work out of the box.

Hi Developer,

I'm facing a problem with this jquery plugin. It is made for menus which are on the left, but my menu in black menu is on the right. What things should I change to solve this problem?

Thanks in advance,

Carlos

Thank you for your work on making this pattern possible. I'm currently working on a project where we can't use jQuery. Do you know if anybody has turned this into a plain JS/DOM script yet?

Would anyone know how to activate the first submenu from the initial list item?

For example using the current demo, when "Explore the Monkeys" is selected the "Patas" would open along with the submenu with the picture.

Thank you.

I'm using the plugin on a responsive site, which uses a differently styled menu for the small screen view. I already have javascript in place to manage calling different functions depending on the viewport.

How can I turn off menu-aim so that I can manage the two different menus? The issue I have is when I render the page at a large viewport size and then resize to a small screen view - the menu-aim behaviors continue to occur, and I basically just want to turn them off.

Firstly, thanks for the great work !

I'm currently having an issue; where once the 'exitMenu' option is called, the previous active item can no-longer be opened - until another row item is opened.

Is there a way to fix this ? Or am I using exitMenu incorrectly?

Thanks

If a menuitem is hovered, the submenu div will show up as expected, and clicking the area outside the menu, the submenu div will close, however when I hovered the same menuitem again, the submenu div didn't appear anymore unless I move to another menuitem and then move back.

    $(document).click(function() {
        // Simply hide the submenu on any click. Again, this is just a hacked
        // together menu/submenu structure to show the use of jQuery-menu-aim.
        $(".popover").css("display", "none");
    });

Maybe it has to do with the code above. I guess the code doesn't deactivate the menu properly.

In https://groups.google.com/group/foundation-framework-/browse_thread/thread/27ecd8c6312d3973 I ask the Foundation team if they want to adopt the Amazon technique.

In the meanwhile - would you be interested in providing an example that uses this library as a replacement for Foundation's top bar navigation sub menus?

If the submenu is not immediately adjacent to the menu, there may be several prev locations outside of the menu, so that prevLoc bounds check will return false, and another submenu may be activated. TO avoid this, we return DELAY as soon as current loc is outside menu. This has to be inserted just before the prevLoc bounds check

            if (!prevLoc) {
                prevLoc = loc;
            }

           // start of new code to be inserted
            if (loc.x < offset.left || loc.x > lowerRight.x ||
                loc.y < offset.top || loc.y > lowerRight.y) {
                // If the mouse location is outside of the entire
                // menu bounds, don't change activation.
                return DELAY;
            }
           // end of inserted code 

            if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
                prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
                // If the previous mouse location was outside of the entire
                // menu's bounds, immediately activate.
                return 0;
            }

Was $(document).mousemove(mousemoveDocument); Which means that every mouse-move on the document would of trigger this callback... which would be very un-efficient (especially on medium to large pages with lots of DOM elements..

So I suggest changing it to: $menu.mousemove(mousemoveDocument); (I tried and it still works!)

Perhaps add the binding of mousemoveDocument as an option where the user can define a selector..

Much time has passed since this plugin was created, but the problems it solves are just as relevant today.

It would be great to take the logic/learnings from this plugin and expose it via a react hooks or components to be used in other projects without jquery.

How to add an event for tab navigation.? How can I open the submenu on press of "Enter" or "Space" and how to close on "esc" click?

It seems that the submenuSelector is not working.

If if you define a submenu selector as following in the example.html it will stop working:

<!-- example.html: line 204 -->

$menu.menuAim({
   activate: activateSubmenu,
   deactivate: deactivateSubmenu,
   submenuSelector: ".popover"
});

Or do I use the option submenuSelector in a wrong way?