3

a quick question:

The appearance of the menu on mobile devices in magento 2 is :

enter image description here

with the 3rd level menu expanded by default.

Is there a way to make the 3rd level menu collapsed by default? something like this:

enter image description here

3

Okay, I came up with a solution. It may not be ideal, but it works for me. Hopefully somebody will find it useful.

It will depend on the base theme you're using, but first of all I had to comment out this line in styles-m.css:

.navigation .submenu:not(:first-child).expanded {
  // display: block !important;
  ...
}

In my own mobile stylesheet, that's set to the same breakpoint as where the responsive menu kicks in, I have this:

li.level0 ul {
  display:none;
}
li.level0 ul a {
  position:relative;
}
.rm-expand {
  float:right;display:block;font-family: 'icons-blank-theme';font-size:42px;position:absolute;right: 7px;top: -6px;
}

Then finally, in my Javascript file I have:

require(['jquery', 'jquery/ui'], function($){
  // ... Irrelevant code omitted ...
  $(document).ready(function() {
    // ... Irrelevant code omitted ...
    $('li.level0 li.parent > a').append('<span class="rm-expand">&#58914;</span>');
    $('.rm-expand').click(function() {
    if ($(this).hasClass('open')) {
      $(this).parent().parent().find('ul:first').slideUp();
      $(this).removeClass('open');
      $(this).html('&#58914;');
    } else {
      $(this).parent().parent().find('ul:first').slideDown();
      $(this).addClass('open');
      $(this).html('&#58913;');
    }
    return false;
  });
  // ... Irrelevant code omitted ...
});
  • 1
    It's work for me. Thanks a lot! – Galina Jun 19 at 7:40
0

You can add a custom jQuery widget to extend on the lib/web/mage/menu.js, how to do this is described here: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_practice.html

In your widget you can now override the '_toggleMobileMode' function from lib/web/mage/menu.js.

Search for this bit:

            this._on({
            /**
             * @param {jQuery.Event} event
             */
            'click .ui-menu-item:has(a)': function (event) {
                var target;

                event.preventDefault();
                target = $(event.target).closest('.ui-menu-item');

                if (!target.hasClass('level-top') || !target.has('.ui-menu').length) {
                    window.location.href = target.find('> a').attr('href');
                }
            },

            /**
             * @param {jQuery.Event} event
             */
            'click .ui-menu-item:has(.ui-state-active)': function (event) {
                this.collapseAll(event, true);
            }
        });

And remove or edit the check !target.hasClass('level-top'), this is where the 'click-through' functionality is only set on level-top links. The rest is styling.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.