Jump to content
StRiANON

Menu closes when I hover on child content

Work in Progress 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
×