Resizing Menu, Closes on mobile when trying to scroll

Question

My Code:

! function(e) {
    e.fn.menumaker = function(n) {
        var s = e(this),
            t = e.extend({
                title: "Sky Walkers",
                format: "dropdown",
                breakpoint: 768,
                sticky: !1
            }, n);
        return this.each(function() {
            if (s.find("li ul").parent().addClass("has-sub"), "select" != t.format) s.prepend('<div id="menu-button">' + t.title + "</div>"), e(this).find("#menu-button").on("click", function() {
                e(this).toggleClass("menu-opened");
                var n = e(this).next("ul");
                n.hasClass("open") ? n.hide().removeClass("open") : (n.show().addClass("open"), "dropdown" === t.format && n.find("ul").show())
            }), multiTg = function() {
                s.find(".has-sub").prepend('<span class="submenu-button"></span>'), s.find(".submenu-button").on("click", function() {
                    e(this).toggleClass("submenu-opened"), e(this).siblings("ul").hasClass("open") ? e(this).siblings("ul").removeClass("open").hide() : e(this).siblings("ul").addClass("open").show()
                })
            }, "multitoggle" === t.format ? multiTg() : s.addClass("dropdown");
            else if ("select" === t.format) {
                s.append('<select style="width: 100%"/>').addClass("select-list");
                var n = s.find("select");
                n.append("<option>" + t.title + "</option>", {
                    selected: "selected",
                    value: ""
                }), s.find("a").each(function() {
                    console.log(e(this).parents("ul").length);
                    var s = e(this),
                        t = "";
                    for (i = 1; i < s.parents("ul").length; i++) t += "-";
                    n.append('<option value="' + e(this).attr("href") + '">' + t + s.text() + "</option")
                }), n.on("change", function() {
                    window.location = e(this).find("option:selected").val()
                })
            }
            return t.sticky === !0 && s.css("position", "fixed"), resizeFix = function() {
                e(window).width() > t.breakpoint && (s.find("ul").show(), s.removeClass("small-screen"), "select" === t.format && s.find("select").hide()), e(window).width() <= t.breakpoint && (s.find("ul").hide().removeClass("open"), s.addClass("small-screen"), "select" === t.format && s.find("select").show())
            }, resizeFix(), e(window).on("resize", resizeFix)
        })
    }
}(jQuery);

<div id="cssmenu">
  <ul>
     <li><a href="index.php"">Home</a></li>
     <li><a href="#">Boot Camp</a>
        <ul>
           <li><a href="th6.php">Townhall 6</a></li>
           <li><a href="th7.php">Townhall 7</a></li>
           <li><a href="th8.php">Townhall 8</a></li>
           <li><a href="th9.php">Townhall 9</a></li>
           <li><a href="th10.php">Townhall 10</a></li>
           <li><a href="th11.php">Townhall 11</a></li>
        </ul>
     </li>
     <li><a href="#">Information</a>
        <ul>
           <li><a href="about.php">About Us</a></li>
           <li><a href="contact.php">Contact Us</a></li>
        </ul>
     </li>
     <li><a href="#">Rules</a>
        <ul>
           <li><a href="rules.php">Normal</a></li>
           <li><a href="war.php">War</a></li>
        </ul>
     </li>
     <li><a href="#">Stats</a></li>
  </ul>
</div>

Problem: When a user tries to scroll on the mobile device it closes the navigation bar, this only happens on phones. I think it has something to do with the .show and .hide functions but I couldn't get it to work, and I usually always find myself on this website and this is my first time ever actually posting a question but you guys always have the answers. Please help! I am not looking to just be fed the answer, I would like to know how to solve it and the steps to take. I am trying to learn javascript. Notice: I did not code this. I do not take ownership of this navigation bar, just trying to fix it.

Edit: Is there a way to go around the .show and .hide on mobile devices?

Answer 1

Attention!!! I found a fix that actually works for this!!!

This code is from the MenuMaker.min.js from the CSSMenuMaker website.

Many many many people there are disappointed because of the issue with the menu closing when scrolling in responsive format.

Here's a little insight:

• It happens because when scrolling on a mobile device, that is considered a "resize" event. The javascript calls for something that closes the menu on resize, but obviously that doesn't work well for end users that are trying to operate the menu on a device that scrolls with touch!!!

• Some other solutions I found were to "remove" the resizeFix function one way or another from the javascript. So one fix was to just remove the following

  , e(window).on("resize", resizeFix)
  

However, that would cause 2 issues:

1) When you would go back to the home page after navigating to another page from the menu on a mobile device, 2 menus would appear stacked until you refreshed the page (only the bottom one would operate if you didn't refresh), and after refreshing it would be back to normal.

2) When you would start above your "breakpoint" on a desktop, and drag the screen to a smaller size, the responsive menu would jumble and appear broken (instead of collapsing together into something pretty that can dropdown). This is because the resizeFix was removed.

The Solution:

Use an "if, else" operation to call the resizeFix function when the screen size is above your breakpoint, or "else" call the same function but with e(frame).on("resize", resizeFix) at the very ending since using "frame" doesn't break the code, but doesn't produce issue #1 from above and also allows for scrolling without the menu closing

Your code should thus look like this near the bottom:

if($(window).width()>768){
return t.sticky === !0 && s.css("position", "fixed"), resizeFix = function() {
            e(window).width() > t.breakpoint && (s.find("ul").show(), s.removeClass("small-screen"), "select" === t.format && s.find("select").hide()), e(window).width() <= t.breakpoint && (s.find("ul").hide().removeClass("open"), s.addClass("small-screen"), "select" === t.format && s.find("select").show())
        }, resizeFix(), e(window).on("resize", resizeFix)
}

else {
return t.sticky === !0 && s.css("position", "fixed"), resizeFix = function() {
            e(window).width() > t.breakpoint && (s.find("ul").show(), s.removeClass("small-screen"), "select" === t.format && s.find("select").hide()), e(window).width() <= t.breakpoint && (s.find("ul").hide().removeClass("open"), s.addClass("small-screen"), "select" === t.format && s.find("select").show())
        }, resizeFix(), e(frame).on("resize", resizeFix)
}
    })
}
}(jQuery);

Try it out for yourself!

It took me 48hrs to solve this issue by researching other peoples ideas and identifying the exact issue, and then for 24hrs of that period, my website was functioning, but had those 2 issues I listed above, until I found out that replacing "window" with "frame" in that final part of the resize fix would allow my site to function in mobile sizes properly without producing that 1st issue where going back to the home would place 2 stacked menus. It was then I realized if there was a way to call the original function for only sizes over my breakpoint, then issue #2 would be resolved, and then have it call the same function but with "frame" inserted for "window" there at the end for when the screen was under my breakpoint, then that would in theory solve all issues and allow for mobile scrolling without the menu shutting.

And boy was I right!

I don't know much about javascript at all, and this is my first experience ever trying to solve and issue and honestly I'm pretty proud considering my research led me to many smart ideas from smart people who know much more about js than I do, yet I was able to solve it and they weren't!

In fact, I only found this post in the first place because I was still searching for a solution. But I came back to post a solution because when I type "Menumaker menu closes when scrolling" in Google or some variation of that, this link comes up in the SERPs near the top on the first page. I figure somebody else may find it and be very happy like I am.

CSSMenuMaker registration and login is bugged out too so I cannot help those who are probably scowering the comments on the website and having the same trouble I was seeing some advice offered but having it amount to nothing or just another feature broken and not a fully functional menu.

I really hope you get this, and I know you posted a long time ago, but like I said maybe someone else will see this and benefit.

Cheers guys!!! -TucciMane