0

I want to add an on-click event on the menu instead of hover in Magento Luma Theme. I have checked a lot of solutions but nothing is properly understandable. Can someone help me out on the same?

Thanks, Rashi

1 Answer 1

2

I got the solution i.e. by overriding menu.js file at location app/design/frontend/vendor/theme/web/mage/menu.js

Modified the function _toggleDesktopMode - Function will look like

_toggleDesktopMode: function () {
        var categoryParent, html;

        $(this.element).off('click mousedown mouseenter mouseleave');

        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();
            },

            /**
             * Prevent focus from sticking to links inside menu after clicking
             * them (focus should always stay on UL during navigation).
             */
            'click .ui-state-disabled > a': function (event) {
                event.preventDefault();
            },

            /**
             * @param {jQuer.Event} event
             */
            'click .ui-menu-item:has(a)': function (event) {
                if ($(event.target).siblings('.submenu').length || $(event.target).parent().siblings('.submenu').length) {
                    event.preventDefault();

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

                    if (!this.mouseHandled && target.not('.ui-state-disabled').length) {
                        this.select(event);

                        // 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) { //eslint-disable-line
                                clearTimeout(this.timer);
                            }
                        }
                    }
                }
            },

            /**
             * @param {jQuery.Event} event
             */
            'click .ui-menu-item': function (event) {

                var target = $(event.currentTarget),
                    submenu = this.options.menus,
                    ulElement,
                    ulElementWidth,
                    width,
                    targetPageX,
                    rightBound;

                if (target.has(submenu)) {
                    ulElement = target.find(submenu);
                    ulElementWidth = ulElement.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);
            },
            /**
             * @param {jQuery.Event} event
             */
            'mouseleave': function (event) {
                this.collapseAll(event, true);
            },

            /**
             * Mouse leave.
             */
        });

        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');
            }, this.options.hideDelay);
        }
    },

This is working perfectly fine according to my requirement.

Thanks, Rashi

Your Answer

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

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