Mobile Shop Menu For All Screen Sizes

[SidFeyDesigns]

I have already made the mobile menu function for all screen sizes by simply changing this in the plugins.js file

    function mobileNavigation(){function f(){0<=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="&#xf105;" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").prepend(h.removeClass("hide")), $(".next").remove())}var b=$("#js-mobile-navigation"),g=$("#js-mobile-menu-button"),h=$("#js-navigation-set");$(window).on("load resize",function(){f()});b.on("click","span.next",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).siblings("span").closest("ul").addClass("hide");$parent=$(this).text();$new=$(this).prev("ul").clone().addClass("clone").appendTo(b);a=$(this).attr("data-name");$('<li><span class="back"><a> Back</a></span></li>').prependTo($new); if($(".navigation-trail").length)c=$(this).parent("li").siblings(".navigation-trail").clone(),$(c).children("span").append(" / "+a),c.prependTo($new);else{var c=$('<li class="navigation-trail"><span>Home</span></li>').prependTo($new);$(c).children("span").append(" / "+a)}});b.on("click","span.back",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).closest("ul").prev("ul").removeClass("hide");breadcrumb=$("a.root").text();last=breadcrumb.substr(breadcrumb.lastIndexOf(" / ")+ 1);$old=$(this).closest("ul");$old.remove();$("a.root").html(function(a,b){return b.replace(last,"")})})}mobileNavigation=new mobileNavigation;

I changed 959>=$(window) to 0<=$(window) and added a menu button to the navbar to open the menu.

I also had to make some changes to the css but that was easy. Just commented out all the .horizontal-mega-menu classes and removed the @media screen and (max-width: 959px) for the .mobile-navigation classes.

Link to see how it looks and functions: https://www.loveisarose.com/

This works great but I had a thought about page speed which lead to a question.

Is it possible to remove the clone functionality and have the menu live within in <div id="js-mobile-navigation" class="mobile-navigation"></div>?

Instead of using javascript to move it there on every page load?

I know I would have to move the readytheme navigation set to be within that mobile navigation div but i'm not sure what part of the script in the plugins.js file would need to be removed.

Trying to stay under that 3 second load time and I was thinking since we want to use that menu functionality for all screen sizes, it'd be better to have it live where it ends up after the script runs.

Less scripts having to process should help that load time I'd think or hope at least.

Any insight, suggestions, or points in the right direction would be appreciated.

Thanks.

[Matt Zimmermann]

It has been a while since I dug into the navigation functions for Suivant, but I believe you will have to rewrite/rework the navigation JavaScript to remove the functions for the menu swapping.

[SidFeyDesigns]

Okay, That was what I was guessing would need to be done. Thanks Matt

[SidFeyDesigns]

Got it to work fairly easily on the wholesale version of our site. Wanted to test it there first.

Unminifying the script helped a lot to pin point the adjustments needed ( https://unminify.com/ ) but I just removed these two snippets of code:

function f(){0<=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="&#xf105;" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").prepend(h.removeClass("hide")), $(".next").remove())}

and

$(window).on("load resize",function(){f()});

I then copied, removed, and pasted the ul from our Wholesale Nav Bar for the navigation items into a new navigation set that I called Wholesale Shop Menu.

I had to tweak the code a little bit in order to replace the JavaScript code that appends the next arrow and allows the user to see the next level categories.

Here is that code:

<ul id="js-navigation-set" class="&mvte:readytheme:layout;">
    <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
            <mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
                <li class="level-1">
                    <span class="parent">&mvt:navigationitem:link;</span>
                    <ul>
                        <mvt:foreach iterator="navigationitem_level2" array="navigationitem:items">
                                <mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
                                    <li class="level-2">
                                        <span class="parent">&mvt:navigationitem_level2:link;</span>
                                        <ul>
                                            <mvt:foreach iterator="navigationitem_level3" array="navigationitem_level2:items">
                                                <li class="level-3"><span>&mvt:navigationitem_level3:link;</span></li>
                                            </mvt:foreach>
                                        </ul>
                                        <span data-name="&mvt:navigationitem_level2:name;" data-rt-icon="&#xf105;" class="next"></span>
                                    </li>
                                <mvt:else>
                                    <li class="level-2">
                                        <span>&mvt:navigationitem_level2:link;</span>
                                    </li>
                                </mvt:if>
                        </mvt:foreach>
                    </ul>
                    <span data-name="&mvt:navigationitem:name;" data-rt-icon="&#xf105;" class="next"></span>
                </li>
            <mvt:else>
                <li class="level-1">
                    <span>&mvt:navigationitem:link;</span>
                </li>
            </mvt:if>
    </mvt:foreach>
</ul>

Then I added the Wholesale Shop Menu item to our Wholesale Global Header within the mobile navigation div.

Everything works just as before but now the navigation set lives within the mobile navigation div.

I'll be changing this on our regular site later today.