How to keep the mobile menu open when loaded for the first time Magento 2?

Question

I want to keep the mobile menu open when the website is loaded for the first time magento2. After that, it should work as the default on open close by click. Can anyone suggest to me?

Answer 1

You can do this using jQuery, try the below code in the toggle function of the menu.js file. Override this file to your theme or you can extend it also.

File: lib/web/mage/menu.js

Code to add in function:

$('.level0.parent > a').each(function(){
    if (!$(this).hasClass('_ignoreTrigger')) {
        $(this).addClass('ui-state-active');
        $(this).next().show();
        $(this).addClass('_ignoreTrigger');
    }
});

Toggle function will look like this:

toggle: function () {
    var html = $('html');

    if (html.hasClass('nav-open')) {
        html.removeClass('nav-open');
        setTimeout(function () {
            html.removeClass('nav-before-open');
        }, this.options.hideDelay);
    } else {
        html.addClass('nav-before-open');
        setTimeout(function () {
            html.addClass('nav-open');
            /** Auto open submenus for first time **/
            $('.level0.parent > a').each(function(){
                if (!$(this).hasClass('_ignoreTrigger')) {
                    $(this).addClass('ui-state-active');
                    $(this).next().show();
                    $(this).addClass('_ignoreTrigger');
                }
            });
            /** END **/
        }, this.options.showDelay);
    }
},