Blogs

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']
	}
);