Add on click event instead of hover on magento menu

Question

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

Answer 1

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