CODEWITHSUNDEEP
javascriptjquerymenunavigation
Eckstein
Eckstein

Reputation: 825

Keep flyout menu open when hover over parent or menu

I've been through quite a few questions on here trying to figure out the best way to do this but can't make them work with my code. I just want the flyout menu to stay put while the mouse is on it after becoming visible when the main menu item element is hovered. Note that the sub-menus are not children of the main menu item. They sit alongside them.

Here's my current script: I need the flyover menu to stay shown until the user moves their mouse off either the menu item itself (unless moving onto the flyover) or off the flyover.

$('.menuItem').mouseover(function() {
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var findFlyout = '#acFly_' + id;
    $(findFlyout).show();
})

$('.menuItem').mouseleave(function() {
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var findFlyout = '#acFly_' + id;
    $(findFlyout).hide();
})

You can see the live page here: http://205.134.239.12/~artscr6/artscrush/

Upvotes: 0

Views: 753

Answers (2)

Ty Kroll
Ty Kroll

Reputation: 1395

You need mouseover and not hover.

Hover handles both mouseover, which you want, but ALSO mouseout, which you don't. As soon as you move your mouse off the link, your flyover hides.

Mouseover will show the flyover when your mouse hits the link and won't do any hiding.

NOTE: You will still need some code to hide the flyover. Try this first and see how it works.

Hover: https://api.jquery.com/hover/

Mouseover: https://api.jquery.com/mouseover/

Adding some code:

Include Outside Events plugin

$('.menuItem').mouseover(function() {
    var item = $(this).attr('id');
    var id = item.substring(item.indexOf("_") + 1);
    var $findFlyout = $('#acFly_' + id);
    // remove previous bound clickoutside
    $('.flyMenu').unbind('clickoutside');
    // close flyout when clicked outside
    $findFlyout.on('clickoutside', function() {
      $findFlyout.unbind('clickoutside').hide();
    }).show();
});

Upvotes: 0

Nora
Nora

Reputation: 3261

The html for the menu is incorrect, as the ul tag can contain only li tags (https://developer.mozilla.org/en/docs/Web/HTML/Element/ul). You should add the fly-out divs inside the li items. Once you fix this, the hover effect will also work.

Upvotes: 0

Related Questions