Announcement

Collapse
No announcement yet.

Opening Mega Menu in a 'Lightbbox'

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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

    #2
    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

    Comment


      #3
      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

      Comment


        #4
        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

        Comment


          #5
          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

          Comment


            #6
            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>
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment

            Working...
            X