My SellerDeck Account | Newsletter | Free Trial

Community and Knowledge Base

  #1  
Old 27-Sep-2016, 01:48 PM
graphicz's Avatar
graphicz graphicz is offline
Registered User
Join Date: May 2007
Full Name: Jonathan Chappell
Posts: 688
Thanks: 52
Thanked 71 Times in 59 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: 688
Thanks: 52
Thanked 71 Times in 59 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 User Says Thank You to graphicz For This Useful Post:
Goz (08-Jan-2017)
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 03:51 PM.


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