cancel
Showing results for 
Search instead for 
Did you mean: 

Issues with Menu on Mobile site

Issues with Menu on Mobile site

;(function($, window, document, undefined) {
    $.fn.swMegamenu = function() {
        $(".navigation.sw-megamenu li.classic .submenu, .navigation.sw-megamenu li.staticwidth .submenu, .navigation.sw-megamenu li.classic .subchildmenu .subchildmenu").each(function(){
            $(this).css("left","-9999px");
            $(this).css("right","auto");
        });
        /$(this).find("li.classic .subchildmenu > li.parent").mouseover(function(){
            var popup = $(this).children("ul.subchildmenu");
            var w_width = $(window).innerWidth();
            
            if(popup) {
                var pos = $(this).offset();
                var c_width = $(popup).outerWidth();
                if(w_width <= pos.left + $(this).outerWidth() + c_width) {
                    $(popup).css("left","auto");
                    $(popup).css("right","100%");
                    $(popup).css("border-radius","6px 0 6px 6px");
                } else {
                    $(popup).css("left","100%");
                    $(popup).css("right","auto");
                    $(popup).css("border-radius","0 6px 6px 6px");
                }
            }
        });
        $(this).find("li.staticwidth.parent,li.classic.parent").mouseover(function(){
            var popup = $(this).children(".submenu");
            var w_width = $(window).innerWidth();
            
            if(popup) {
                var pos = $(this).offset();
                var c_width = $(popup).outerWidth();
                if(w_width <= pos.left + $(this).outerWidth() + c_width) {
                    $(popup).css("left","auto");
                    $(popup).css("right","0");
                    $(popup).css("border-radius","6px 0 6px 6px");
                } else {
                    $(popup).css("left","0");
                    $(popup).css("right","auto");
                    $(popup).css("border-radius","0 6px 6px 6px");
                }
            }
        });
        $(window).resize(function(){
            $(".navigation.sw-megamenu li.classic .submenu, .navigation.sw-megamenu li.staticwidth .submenu, .navigation.sw-megamenu li.classic .subchildmenu .subchildmenu").each(function(){
                $(this).css("left","-9999px");
                $(this).css("right","auto");
            });
        });
        $(".nav-toggle").off('click').on('click',function(e){
            if(!$("html").hasClass("nav-open")) {
                $("html").addClass("nav-before-open");
                setTimeout(function(){
                    $("html").addClass("nav-open");
                }, 300);
            }
            else {
                $("html").removeClass("nav-open");
                setTimeout(function(){
                    $("html").removeClass("nav-before-open");
                }, 300);
            }
        });
        $("li.ui-menu-item > .open-children-toggle").off("click").on("click", function(){
            if(!$(this).parent().children(".submenu").hasClass("opened")) {
                $(this).parent().children(".submenu").addClass("opened");
                $(this).parent().children("a").addClass("ui-state-active");
            }
            else {
                $(this).parent().children(".submenu").removeClass("opened");
                $(this).parent().children("a").removeClass("ui-state-active");
            }
        });
    };
})(window.Zepto || window.jQuery, window, document);

Our new site that we are trying to get up and going is not fully functional on mobile. 

The menu is unresponsive. There is one code error in particular I have tried to fix, but with no luck. It's in the javascript of the Megamenu.

 

It throws this error:

Uncaught SyntaxError: Invalid regular expression: missing /

 

 

I've tried removing the / in the 7th line of code but it ends up messing up our who site for some reason. Any help is greatly appreciated. 

 

In case you want to check out the site for yourself, the url is www.deqonline.com/store

 

3 REPLIES 3

Re: Issues with Menu on Mobile site

Hello,

 

 /$(this).find("li.classic .subchildmenu > li.parent").mouseover(function(){

it should be

 $(this).find("li.classic .subchildmenu > li.parent").mouseover(function(){

Hope it will help you.

 

If work then mark as solution 


Problem solved? Click Kudos & Accept as Solution!
Sunil Patel
Magento 2 Certified Professional Developer & Frontend Developer

Re: Issues with Menu on Mobile site

Sunil,

 I tested that and it pretty much crashed our site when I removed the slash on the backend. 

Would you have any idea why that might happen?

Thanks for your help!

Re: Issues with Menu on Mobile site