This website uses cookies to ensure you get the best experience. Learn More.
Display navigation drop down on click event
Over the last few weeks I've been trying to figure out a way to make navigation's dropdown menus display on click instead of hover.
I added this code to the theme's main.js file.
AUI.add( 'liferay-navigation-interaction-click', function(A) { A.mix( Liferay.NavigationInteraction.prototype, { _initChildMenuHandlers: function(navigation) { var instance = this; if (navigation) { navigation.delegate(['click', 'clickoutside'], instance._onMouseToggle, '> li', instance); navigation.delegate('keydown', instance._handleKeyDown, 'a', instance); } }, _onMouseToggle: function(event) { var instance = this; var mapHover = instance.MAP_HOVER; var eventType = 'hideNavigationMenu'; if (event.type == 'click') { eventType = 'showNavigationMenu'; } mapHover.menu = event.currentTarget; Liferay.fire(eventType, mapHover); }, }, true ); }, '', { requires: ['event-click', 'event-outside', 'liferay-navigation-interaction'] } );