[xgarb]

With the hamburger menu (for mobile and small screens) I have this working as well. So now the page loads and the menu items are only loaded into the HTML when requested by a click or press.

I've used v6 of the menu system (mmenu.frebsite.nl/) and made a couple of template and CSS tweaks.

This code could probably be improved because I don't 100% understand what X-cart does to make the mmenu work with the rest of the system.

customer/js/slidebar.js

function slidebar() {
    var self = this;
    $("#main_menu").one('mouseenter touchstart', function(event) {
        event.preventDefault();
        core.trigger('mm-menu.before_create', jQuery('#slidebar'));

        var $ul = jQuery('#slidebar').find(".slidebar-categories").parent();

        $.get("megamenuminifiedmobile.txt", function(menuhtmldata) { // add text file to menuhtmldata var

            var new_content = menuhtmldata; //sessionStorage.mobilemenu;
            jQuery('#slidebar').find(".slidebar-categories").after(new_content);


            jQuery('#slidebar').mmenu(self.options, self.configuration);

            var api = jQuery('#slidebar').data('mmenu');
            api.initPanels();

            if (event.type === 'touchstart') { // touchmove has been triggered
                api.open();
            }

            core.trigger('mm-menu.created', api);
            api.bind('closed', function() {
                api.closeAllPanels();
            });
        });
        jQuery('.dropdown-menu#search_box').parent().on('shown.bs.dropdown', function() {
            jQuery('#header').addClass('hidden');
        });

        jQuery('.dropdown-menu#search_box').parent().on('hidden.bs.dropdown', function() {
            jQuery('#header').removeClass('hidden');
        });
    });
}

Mouseenter (followed by a click to open the menu) works without the api.open code but mobile needs this to make the menu appear.