Magento 2 comes built in with the jQuery UI Menu Widget that is very poorly documented in the Magento Docs. So there is no need to pull in a 3rd party solution. The issue with this one is the lack of examples in the core code. The default jQuery implementation doesn't actually work on Magento, it kicks an error because the dom is not structured in a way that the JS can find the elements it needs.
So i had to play around with it for a while before i was able to get it working. But it's a pretty slick solution once you get it right.
<nav class="navigation" data-action="navigation">
<ul id="menu" data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left+10 top+30"}}}'>
<li class="ui-state-disabled ui-menu-item"><div>Toys (n/a)</div></li>
<li class="ui-menu-item"><div>Books</div></li>
<li class="ui-menu-item"><div>Clothing</div></li>
<li class="ui-menu-item""><div>Electronics</div>
<ul>
<li class="ui-state-disabled"><div>Home Entertainment</div></li>
<li><div>Car Hifi</div></li>
<li><div>Utilities</div></li>
</ul>
</li>
<li class="ui-menu-item"><div>Movies</div></li>
<li class="ui-menu-item"><div>Music</div>
<ul>
<li><div>Rock</div>
<ul>
<li><div>Alternative</div></li>
<li><div>Classic</div></li>
</ul>
</li>
<li><div>Jazz</div>
<ul>
<li><div>Freejazz</div></li>
<li><div>Big Band</div></li>
<li><div>Modern</div></li>
</ul>
</li>
<li><div>Pop</div></li>
</ul>
</li>
<li class="ui-state-disabled ui-menu-item"><div>Specials (n/a)</div></li>
</ul>
</nav>
I have pulled the example code from the jQuery site and adapted it to work with Magento 2. The whole thing is kicked off by the data-mage-init
in the main ul
:
data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left+10 top+30"}}}'
This is what sets up and init the JS system to create the menu. You can play around with the settings, paying special mind to the position
section. This is where you will set the default layout of the menu. Right now it's set up for a sidebar menu where the hover expands to the right of the main menu item.
Also take note that the class names are essential for this to work. Without class="ui-menu-item"
in the top level elements the menu will not set default values correctly. Of course there is a lot more you can do with this, but it's a start. Looking at the main menu on the site will also get you some ideas on how Magento created theirs.
For more digging around, you can see this core file:
lib/web/mage/menu.js