Announcement

**graphicz** · 07-Jan-2017, 04:37 PM

I have found that in iOs on mobile devices this makes you have to click on menu items twice. Therefore it is best if this effect only applies to desktop.

Modify the code given thus (it is a bit belt and braces!):

Code:

<div class="mmmoverlay">
<style>
	@media screen and (min-width:801px) {
       #mm-nav-overlay {
       background-color: #000000;
       opacity: 0.6;
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60.00000238418579)";
       }
       }
</style>
<script>
		$(document).ready(function() { 
if (document.documentElement.clientWidth > 801) {
			$("#mega-menu").mouseenter(function() {              
					$("#mm-nav-overlay").toggle();        
					}).mouseleave(function () {     
			$("#mm-nav-overlay").hide();
					});
}		
});
</script>	
</div>

**MDN** · 17-Jun-2017, 10:48 AM

Very nice, thanks for this, I also created a variable "ShowMenuOverlay" with a true/false and wrapped both codes in a block set to true, this way from the Mega Menu site settings you can turn it on and off as you wish.

**MDN** · 04-Aug-2017, 03:31 PM

I have implemented Normans Mega Menu fix:

http://community.sellerdeck.com/showthread.php?t=57239

This makes the menu much more user friendly, however have had to turn off the lightbox as its got no delay. Whilst the drop down has a delay the lightbox displays immediately, so when the mouse passes over the menu doesn't drop, but the lighbox becomes active.

Is there any way the code above can be altered to a hoverintent rather than mouseenter/mouseleave? I think then this would make it active at the same time the menu drops, unless anyone has another option.

Thanks very much

**MDN** · 13-Aug-2017, 02:32 PM

OK so I have a semi solution for anyone who uses this and the hoverintent patch provided by Norman. I have set a delay on the mouseover

Replacing:

Code:

		$(document).ready(function() { 
if (document.documentElement.clientWidth > 801) {
			$("#mega-menu").mouseenter(function() {
					$("#mm-nav-overlay").toggle(); 
					}).mouseleave(function () {     
			$("#mm-nav-overlay").hide();
					});
}		
});

with:

Code:

		$(document).ready(function() { 
if (document.documentElement.clientWidth > 801) {
			$("#mega-menu").mouseenter(function() {
			timer = setTimeout(function(){
					$("#mm-nav-overlay").toggle();
				},200/* <--- the delay */)	
					}).mouseleave(function () { 
					clearTimeout(timer);
			$("#mm-nav-overlay").hide();
					});
}		
});

this delays the lightbox effect to trigger at the same time as the hoverintent drops the menu

**graphicz** · 18-Aug-2018, 10:03 AM

I tried applying this to a site with a custom menu and had trouble with terrible flickering on the target div with the mouseenter event.

The solution is to give the target div a position: relative.

Here is the code for a simple html page demonstrating the effect and how it is done. The target div is called 'ourdiv'

Code:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>

    <style>
        #mm-nav-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 211;
            display: none
        }

        /*== style for demo ==*/
        #ourdiv {
            z-index: 999999;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid black;
            background: white;
            background-colour: white;
            position: relative;
        }
    </style>
</head>

<body>

    INLINE After HEADER
    <div class="mmmoverlay">
        <style>
            @media screen and (min-width:801px) {
                #mm-nav-overlay {
                    background-color: #000000;
                    opacity: 0.3;
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60.00000238418579)";
                }
            }
        </style>
        <script>
            $(document).ready(function() {
                if (document.documentElement.clientWidth > 801) {
                    $("#ourdiv").mouseenter(function() {
                        $("#mm-nav-overlay").toggle();
                        (200)
                    }).mouseleave(function() {
                        $("#mm-nav-overlay").hide();
                    });
                }
            });
        </script>
    </div>


    <div id="ourdiv">
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>
    </div>
    <div style="clear:left"></div>
    AFTER MEGA MENU
    <div style="display:none" id="mm-nav-overlay"></div>
</body>

</html>

Announcement

Opening Mega Menu in a 'Lightbbox'

Opening Mega Menu in a 'Lightbbox'

Comment

Comment

Comment

Comment

Comment