2

In Luma theme, the mobile slide out menu is not functioning correctly.

When we click "women" menu item, it opens the sub menu but then we click any other parent to open its sub menu it just closes the already opened menu.

Then we have to click it again to open sub menu

Demo : http://magento2-demo.nexcess.net/

  • Is it a clean install? Or did you made changes allready? – Akif Sep 2 '16 at 12:24
  • The url I in the question is magento 2 Demo, I can not provide my sites Url as it is on local, but it is magento issue, as the above url is a fresh demo with no changes – Arun Karnawat Sep 2 '16 at 13:01
  • Ah sorry didn't see/get that. Did you check if it is an already known problem? github.com/magento/magento2/issues – Akif Sep 2 '16 at 13:06
  • Yes, already googled with no luck – Arun Karnawat Sep 2 '16 at 13:10
4
Override menu.js file into your theme file,

Replace function with below inside menu.js file

_toggleMobileMode() and _toggleDesktopMode() Replace with below code

  _toggleMobileMode: function () {
            $(this.element).off('mouseenter mouseleave');
            this._on({
                "click .ui-menu-item:has(a)": function (event) {
                    event.preventDefault();

                    var 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');
                    }
                },
                "click .ui-menu-item:has(.ui-state-active)": function (event) {
                    this.collapseAll(event, true);
                 }
            });

            var subMenus = this.element.find('.level-top');
            $.each(subMenus, $.proxy(function (index, item) {
                var category = $(item).find('> a span').not('.ui-menu-icon').text(),
                    categoryUrl = $(item).find('> a').attr('href'),
                    menu = $(item).find('> .ui-menu');

                this.categoryLink = $('<a>')
                    .attr('href', categoryUrl)
                    .text($.mage.__('All ') + category);

                this.categoryParent = $('<li>')
                    .addClass('ui-menu-item all-category')
                    .html(this.categoryLink);

                if (menu.find('.all-category').length === 0) {
                    menu.prepend(this.categoryParent);
                }

            }, this));
        },

        _toggleDesktopMode: function () {
            this._on({
                // Prevent focus from sticking to links inside menu after clicking
                // them (focus should always stay on UL during navigation).
                "mousedown .ui-menu-item > a": function (event) {
                    event.preventDefault();
                },
                "click .ui-state-disabled > a": function (event) {
                    event.preventDefault();
                },
                "click .ui-menu-item:has(a)": function (event) {
                    var target = $(event.target).closest(".ui-menu-item");
                    if (!this.mouseHandled && target.not(".ui-state-disabled").length) {
                        this.select(event);

                        // Only set the mouseHandled flag if the event will bubble, see #9469.
                        if (!event.isPropagationStopped()) {
                            this.mouseHandled = true;
                        }

                        // Open submenu on click
                        if (target.has(".ui-menu").length) {
                            this.expand(event);
                        } else if (!this.element.is(":focus") && $(this.document[0].activeElement).closest(".ui-menu").length) {

                            // Redirect focus to the menu
                            this.element.trigger("focus", [true]);

                            // If the active item is on the top level, let it stay active.
                            // Otherwise, blur the active item since it is no longer visible.
                            if (this.active && this.active.parents(".ui-menu").length === 1) {
                                clearTimeout(this.timer);
                            }
                        }
                    }
                },
                "mouseenter .ui-menu-item": function (event) {
                    var target = $(event.currentTarget),
                        ulElement,
                        ulElementWidth,
                        width,
                        targetPageX,
                        rightBound;

                    if (target.has('ul')) {
                        ulElement = target.find('ul');
                        ulElementWidth = target.find('ul').outerWidth(true);
                        width = target.outerWidth() * 2;
                        targetPageX = target.offset().left;
                        rightBound = $(window).width();

                        if ((ulElementWidth + width + targetPageX) > rightBound) {
                            ulElement.addClass('submenu-reverse');
                        }
                        if ((targetPageX - ulElementWidth) < 0) {
                            ulElement.removeClass('submenu-reverse');
                        }
                    }

                    // Remove ui-state-active class from siblings of the newly focused menu item
                    // to avoid a jump caused by adjacent elements both having a class with a border
                    target.siblings().children(".ui-state-active").removeClass("ui-state-active");
                    this.focus(event, target);
                },
                "mouseleave": function (event) {
                    this.collapseAll(event, true);
                },
                "mouseleave .ui-menu": "collapseAll"
            });

            var categoryParent = this.element.find('.all-category'),
                html = $('html');

            categoryParent.remove();

            if (html.hasClass('nav-open')) {
                html.removeClass('nav-open');
                setTimeout(function () {
                    html.removeClass('nav-before-open');
                }, 300);
            }
        },
        _delay: function(handler, delay) {
            var instance = this,
                handlerProxy = function () {
                return (typeof handler === "string" ? instance[handler] : handler)
                    .apply(instance, arguments);
            };

            return setTimeout(handlerProxy, delay || 0);

    },
        expand: function( event ) {
             var newItem = this.active &&
                 this.active
                     .children( ".ui-menu " )
                     .children( ".ui-menu-item" )
                     .first();

             if ( newItem && newItem.length ) {
                 if (newItem.closest( ".ui-menu" ).is( ":visible" )
                     && newItem.closest( ".ui-menu" ).has( ".all-categories" )
                 ) {
                     return;
                 }

                 this._open( newItem.parent() );

                 // Delay so Firefox will not hide activedescendant change in expanding submenu from AT
                 this._delay(function() {
                     this.focus( event, newItem );
                 });
             }
         },
         select: function( event ) {
             this.active = this.active || $( event.target ).closest( ".ui-menu-item" );
             if (this.active.is( ".all-category" )) {
                 this.active = $( event.target ).closest( ".ui-menu-item" );
             }
             var ui = { item: this.active };
             if ( !this.active.has( ".ui-menu" ).length ) {
                 this.collapseAll( event, true );
             }
             this._trigger( "select", event, ui );
        }
    });
  • 1
    you have introduced 2 new methods select() and expand(), which are not available in default menu.js. but both the methods where called in default menu.js and there was no error can you explain me why ? – Arun Karnawat Sep 2 '16 at 13:33
  • @ArunKarnawat he got like 25k points. Maybe that's why lol hahaha. – Mohammed Joraid May 22 '18 at 11:58

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.