Mega menu model

[DavidMacDonald]

I suggest a separate mega menu version created out of the current menu #410 ... I got it going as a rough idea, but I couldn't get the down arrow to continue to work, to open the menu and arrow through the choices. It would require the following modifications to create a mega example.

• Allow the menu sub item to take up full screen width
• Allow something like 3 columns of sub <ul> elements which have a <h2> inside the first <li>
• Adjust the JS so that the arrow keys will take user into the sub menu items.

However, I think there is an unresolved issue about roles of menubar, menu, menuitem and arrow key navigation. It appears that the wider community has serious reservations about making a navigation menu out of this roles model . So I think we should resolve this first.

#991
#353

[DavidMacDonald]

Note
DIOR did a half decent job of it I think, riffing off the WCAG tutorial
https://www.dior.com/en_us
choose US.

[jasonday]

Isn't this covered by #1070?
https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-navigation.html

[DavidMacDonald]

@jasonday I don't think so. Mega menus have many characteristics and several designs that are not captured in the generic model disclosure menu.
There are groups of links, sometimes a left panel with details on the right panel like a sideways tabbed interface. Sometimes the parent button at the top is also a link (on hover opens menu on click goes to the category landing page)
In which case we could provide a link to go to the product category page and next to it a button to open the menu, etc...
And then there is the situation where it collapses into mobile hamburger for all that content.

[carmacleod]

@DavidMacDonald There's a "top-level links" variant of the disclosure navigation example currently being reviewed in PR #1614. You can try it out with the Preview link in the opening comment. Feedback welcome.