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/

4
  • Is it a clean install? Or did you made changes allready?
    – Akif
    Sep 2, 2016 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 Sep 2, 2016 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, 2016 at 13:06
  • Yes, already googled with no luck Sep 2, 2016 at 13:10

1 Answer 1

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 );
        }
    });
2
  • 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 ? Sep 2, 2016 at 13:33
  • @ArunKarnawat he got like 25k points. Maybe that's why lol hahaha. May 22, 2018 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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