Hm. I had one of those “drank a lot and tossed and turned all night and kept thinking this” kinda nights, about mega menus.
In many ways, mega (navigation) menus fall under many of the ideas for the panel setup:
- on desktop they have (or are supposed to have) similar behaviour as an exclusive-panel setup (one panel/submenu open at a time)
- on mobile they are often collapsed into accordions
- also, devs use all sorts of weird stuff when trying to decide what roles they should use (I think aria-expanded might be the most popular now for letting users know a submenu panel is open?)
They’re not usually turned into carousels or slide decks, but carousels and slide decks are often written as image-filled ul>li>a navigation, with on mobile sometimes the separate set of controls being removed (and swiping the main list directly instead).
- a group of in-page skip links, next to
- a list of content chunks the skip links point to
Navigation mega menus, as well as current (if well-built) tab-panels, carousels and accordions degrade normally into this pattern (except that megas are nested). Important is to notice that in the degraded pattern, the “titles” are anchors, pointing to some destination, with native focus and click listeners. The skip links can seem silly when the panels are tiny but they’re useful when panels get long.
So in this thought experiment, for
panel titles, I wonder if
Uses HTMLElement ??"
needs to go further, more towards something that gets native focus and maybe even has a destination?
And the other thing I wondered, is… do I see two things going on?
- a single structure we’re using to build lots of things, controlling names and showing/hiding content (the reason for this idea to make a unifying set of HTML)
but also, separately
- a single set of behaviour (users interact with controlling names to hide/show associated content)
Megamenus (where not only links but other content like headings and images are in the submenus) have (or generally should have) similar behaviour to this proposal, but quite different HTML structure. In Megas, the submenus are nested into the list-items and are siblings to the anchors (and the anchors don’t point to their siblings but usually off-page). In panels, the controllers are in separate lists from the content and are siblings. So the aria stuff tends to be very different despite the similar behaviour and keystrokes (just add :hover to the panels and accordions to complete it). A developer asked to build a mega-menu before s/he’s given any link destinations would have to wonder if they really just want to buid a tab-panel/accordion. The choice between the two structures then seems entirely based on “do the main-level links have real destinations.” On some websites, they don’t. They just have href="#".
It would be nice if, despite two slightly different structures, if there were a way for devs to say "For this structure I expect is-a sets of roles (controllers and content) and has-a sets of states (selected or not, content visible or not) and does-a sets of behaviour and listeners (what does focus, arrow key, hover and touch do).
Or, let’s say these panels went somewhere: aren’t some developers going to look at panel structure and try writing mega-menus as tab-panels (but then with external anchors) instead of nested lists?
This has just been bugging me all night. Maybe mega menus are not larger and more fabulous list-based navigation menus. Maybe they’re controller-panels. Except that you can also go somewhere too. Panels that navigate.