Jump to content

Menu closes when I hover on child content

Not a Bug 1.0.11

I created magic type item. Inside it I added the code:

<a data-ipsmenu="" href="#" id="elMenu3" rel="external nofollow noopener" target="_blank">Click on me</a>
	</li>
</ul>
<ul id='elMenu3_menu' class='ipsMenu ipsMenu_normal ipsHide'>
	<li class='ipsMenu_item'>
		<a href='#'>Menu item</a>
	</li>
	<li class='ipsMenu_item ipsMenu_subItems'>
		<a href='#'>Menu item with sub-items</a>
		<ul class='ipsMenu ipsMenu_wide ipsHide'>
			<li class='ipsMenu_item'><a href='#'>sub-item 1</a></li>
			<li class='ipsMenu_item'><a href='#'>sub-item 2</a></li>
			<li class='ipsMenu_item'><a href='#'>sub-item 3</a></li>
		</ul>
	</li>
</ul>

When I hover on the menu that displays by click - my mega menu closes :(

Is it possible to fix it and how is it possible?

P.S.: Inside magic block I need to use menu, tabs and hovercard Invision Framework features. Tabs works ok, but with both others we have the problem.

Edited by StRiANON

Share this comment


Link to comment

Unfortunatelly, hovercards are not child content. So, what we did: we added this javascript (included as separate file bcz if we insert it <script> tag inside a template - ips replaces $rel_el o.O)

$(function() {
	$('body').on("mouseover", ".cTopicHovercard.top-menu, .ipsMenu_item.top-menu", function(event) {
		$('.cjmg_mega').addClass('forceopen');
	});
	$('body').on("mouseout", '.cTopicHovercard.top-menu, .ipsMenu_item.top-menu', function(event) {
		$('.cjmg_mega').removeClass('forceopen');
		//console.log(event);
		if (event.relatedTarget !== null) {
			var $elems = $(event.relatedTarget).parents('.cjmg_mega');
			if ($elems.length > 0) {
				var $rel_el = $elems.eq($elems.length - 1);
					$rel_el.show();
			}
		}
	});
});

This requires from us add additional .top-menu class to our hovercard or ipsmenu that uses or calls inside magic block and .forceopen class with display:block param.

Maybe it will be useful for you :)

Edited by StRiANON

Share this comment


Link to comment

this seems to be very specific to what you are doing, as ips menu js will detach the sub menu and move it to outside of the mgm menu container. since this is a use case situation, i would say your solution you have come up with is probably better than me trying to fix for general use. 

Share this comment


Link to comment
×
×
  • Create New...