Disable Hover on main menu and make it work on click

The main menu in an eCommerce website holds significant importance as it serves as the primary navigational tool for users to explore and access various sections, products, and features of the online store. The main menu helps users discover products, services, and content they might not have been aware of. By presenting various categories and sections prominently, the menu can drive users to explore different parts of the website, increasing the chances of making a sale.

The style and layout of the main menu contribute to the website's overall aesthetic & attractiveness. Magento essentially makes use of a jQuery menu widget to deliver all of its default features. By default, the menu appears when you mouse over it. I had a requirement in which I needed to open the menu only when the customer clicked. Because we were using Megamenu, and when it opened, it took up half of the screen. And this might be annoying for customers at times. 

So to solve this, I have created a JS mixin for the menu core class. Please follow the below steps to achieve this:

Step 1: Add Mixins in the require-js file - Mixins are declared in the mixins property in the requirejs-config.js configuration file. This file must be created in the same area-specific directory the mixin is defined in.

var config = {
    config: {
        mixins: {
            'mage/menu': {
                'MageInsight_TopMenu/js/megamenu': true
            }
        }
    }
}

Step 2: Create Mixins - Mixins are JavaScript files located under the web/js directory under an area-specific directory. The scope of a module’s mixin depends on its directory location under the view directory. This allows you to target component instances in specific areas in Magento.

define([
    'jquery'
], function ($) {
    'use strict';
    
    var menuMixin = {
    
        _toggleDesktopMode: function () {
            var categoryParent, html;

            $(this.element).off('click mousedown mouseenter mouseleave mousemove');
           
            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) {
                        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) {
                               
                                event.preventDefault();
                                
                                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 .ui-menu-item': function (event) {
                    this.collapseAll(event, true);
                }
            });
    
            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);
            }
        }
    };
    
    return function (targetWidget) {
        $.widget('mage.menu', targetWidget.menu, menuMixin);
        return $.mage.menu;
    };
});