My SellerDeck Account | Newsletter | Free Trial

Community and Knowledge Base

  #1  
Old 27-Sep-2016, 12:48 PM
graphicz's Avatar
graphicz graphicz is offline
Registered User
Join Date: May 2007
Full Name: Jonathan Chappell
Posts: 706
Thanks: 56
Thanked 77 Times in 62 Posts
Opening Mega Menu in a 'Lightbbox'

There is a bit of a trend for the opening of mega menus in a 'Lightbbox' type effect.

This is easy to do with SellerDeck.

1. Paste this into your css:
Code:
#mm-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 211;
    display: none
}
2. In responsive outer layout just before <div class="navigation-bar"> paste:

Code:
 <style>
                    #mm-nav-overlay {
                        background-color: #000000;
                        opacity: 0.6;
                        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60.00000238418579)";
                    }
                </style>
       <script>
$(document).ready(function() {  
    $("#mega-menu").mouseenter(function() {              
         $("#mm-nav-overlay").toggle();        
    }).mouseleave(function () {     
        $("#mm-nav-overlay").hide();
    });
});
		</script>
Open the Mega Menu layout and at the end, just after </div><div style="clear:left"></div> paste:
Code:
<div style="display:none;" id="mm-nav-overlay"></div>
Enjoy!
__________________
Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Reply With Quote
The Following User Says Thank You to graphicz For This Useful Post:
Duncan Rounding (27-Sep-2016)
  #2  
Old 07-Jan-2017, 04:37 PM
graphicz's Avatar
graphicz graphicz is offline
Registered User
Join Date: May 2007
Full Name: Jonathan Chappell
Posts: 706
Thanks: 56
Thanked 77 Times in 62 Posts
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>
__________________
Jonathan Chappell
Website Designer
SellerDeck Website Designer
Actinic to SellerDeck upgrades
Graphicz Limited - www.graphicz.co.uk
Reply With Quote
The Following 2 Users Say Thank You to graphicz For This Useful Post:
Goz (08-Jan-2017), MDN (17-Jun-2017)
  #3  
Old 17-Jun-2017, 10:48 AM
MDN MDN is offline
Registered User
Join Date: Jun 2010
Full Name: Lee Phillips
Posts: 107
Thanks: 24
Thanked 17 Times in 12 Posts
Thumbs up

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.
__________________
Many Thanks
Lee
www.mdnsupplies.co.uk
www.hookandloopfasteners.co.uk
Reply With Quote
The Following User Says Thank You to MDN For This Useful Post:
Goz (17-Jun-2017)
  #4  
Old 04-Aug-2017, 03:31 PM
MDN MDN is offline
Registered User
Join Date: Jun 2010
Full Name: Lee Phillips
Posts: 107
Thanks: 24
Thanked 17 Times in 12 Posts
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
__________________
Many Thanks
Lee
www.mdnsupplies.co.uk
www.hookandloopfasteners.co.uk
Reply With Quote
  #5  
Old 13-Aug-2017, 02:32 PM
MDN MDN is offline
Registered User
Join Date: Jun 2010
Full Name: Lee Phillips
Posts: 107
Thanks: 24
Thanked 17 Times in 12 Posts
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
__________________
Many Thanks
Lee
www.mdnsupplies.co.uk
www.hookandloopfasteners.co.uk
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off



All times are GMT. The time now is 02:03 AM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.