Mega Menu open on hover

[tanvirulhaque]

The navigation block has an option "Submenus: Open on click" Is it possible for this option to work with the Mega Menu or any option to open the Mega Menu on hover?

[ndiego]

Yeah, this is definitely something you could add. Since this is just an experimental plugin, I don't have any plans to add this, but anyone is welcome to write a PR.

[georgestephanis]

A quick way to do this is via Custom CSS applied to the Mega Menu block in the site editor -- I added a small .2s delay on the submenu fading out, to handle cases where there's a small pixel gap between the menu item and the megamenu so it doesn't poof away when moving to it.

& .wp-block-outermost-mega-menu__menu-container {
  transition: opacity .1s linear, visibility;
  transition-delay: 0.2s, 0.2s;
}

&:hover .wp-block-outermost-mega-menu__menu-container {
  opacity: 1;
  visibility: visible;
  overflow: visible;
  transition-delay: 0s, 0s;
}

&:hover .wp-block-outermost-mega-menu__toggle-icon svg {
  transform: rotate( 0deg ) !important; 
}

[georgestephanis]

A more correct implementation to stick with the interactivity api would be closer to

diff --git a/src/outermost-mega-menu/render.php b/src/outermost-mega-menu/render.php
index 2ac372f..1960114 100644
--- a/src/outermost-mega-menu/render.php
+++ b/src/outermost-mega-menu/render.php
@@ -44,6 +44,8 @@ $toggle_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" widt
 	data-wp-context='{ "menuOpenedBy": {} }'
 	data-wp-on--focusout="actions.handleMenuFocusout"
 	data-wp-on--keydown="actions.handleMenuKeydown"
+	data-wp-on--mouseover="actions.handleMenuMouseover"
+	data-wp-on--mouseleave="actions.handleMenuMouseleave"
 	data-wp-watch="callbacks.initMenu"
 >
 	<button
diff --git a/src/outermost-mega-menu/view.js b/src/outermost-mega-menu/view.js
index 755afd2..917b678 100644
--- a/src/outermost-mega-menu/view.js
+++ b/src/outermost-mega-menu/view.js
@@ -6,7 +6,7 @@ import { store, getContext, getElement } from '@wordpress/interactivity';
 const { state, actions } = store( 'outermost/mega-menu', {
 	state: {
 		get isMenuOpen() {
-			// The menu is opened if either `click` or `focus` is true.
+			// The menu is opened if any method is true.
 			return (
 				Object.values( state.menuOpenedBy ).filter( Boolean ).length > 0
 			);
@@ -66,6 +66,12 @@ const { state, actions } = store( 'outermost/mega-menu', {
 				actions.closeMenu( 'focus' );
 			}
 		},
+		handleMenuMouseover( event ) {
+			actions.openMenu( 'hover' );
+		},
+		handleMenuMouseleave( event ) {
+			actions.closeMenu( 'hover' );
+		},
 		openMenu( menuOpenedOn = 'click' ) {
 			state.menuOpenedBy[ menuOpenedOn ] = true;
 		},

It would just need some additional code to add the delay to account for mouseouts when moving to the megamenu.

Which could also be handled with the transition delays above if you didn't want to mess around with doing it in js.