Mouseover/out mega-menu controller

2

Just as a follow-up, I think I have it working. I had to change mouseover and mouseout to mouseenter and mouseleave.

Then for each sub menu I added the same actions and passed through the submenu-index. So:

<div data-controller="megamenu">
	<div>
		<a href="#" data-action="mouseenter->megamenu#here mouseleave->megamenu#gone" data-submenu-index="0">Link 1</a>
		<a href="#" data-action="mouseenter->megamenu#here mouseleave->megamenu#gone" data-submenu-index="0">Link 2</a>
	</div>
	<div class="subitem" data-target="megamenu.submenu" data-action="mouseenter->megamenu#here mouseleave->megamenu#gone" data-submenu-index="0">
		<h2>Sub Menu 1</h2>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
		</ul>
	</div>
	<div class="subitem" data-target="megamenu.submenu" data-action="mouseenter->megamenu#here mouseleave->megamenu#gone" data-submenu-index="1">
		<h2>Sub Menu 2</h2>
		<ul>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</div>
</div>

I also added a click toggle on the main menu items for accessibility purposes.

1 Like