Experiment #1: Focus-based Navigation with Sub-menus

This concept fails the keyboard navigation test and as such is not very accessible. As an experiment, this is here for edutainment purposes only.

Hover-triggered menus on websites are annoying. Even more so when you're on a mobile device. One problem can be the lack of overlap between the menu (or sub-menu) being shown and the trigger. When you mouse off the trigger, the menu disappears before you can mouse on to it. Solutions to this include ditching hierarchical menus or moving to a click-triggered solution. Hierarchies can still be useful for reducing the number of clicks needed to get to a subcategory and removing the need for potentially useless landing pages for major sections.

If we consider click-based interactions, they are typically the realm of JavaScript. I wanted to see about solving this with just CSS. Thus the only interaction which lasts long enough to be useful, and isn't hover, is :focus. So down the rabbit hole I went with it. The first stop being some somewhat standard menu markup and a little CSS:

The result is mostly there, we just have to collapse the sub-menus and bring in the focus handling to make them reappear. Our second stop then is to add the ever-popular tabindex trick to make the parent spans able to receive focus. For brevity I've just shown an example of the change below instead of in context with all of the HTML from above. Next we can add a selector to bring them back when the parent is focused.

Movies

However there's a problem. The sub-menu items steal focus from the parent, causing the sub-menu to collapse immediately when clicking on an item in it and preventing the click even from being fully processed. To fix this, we need to ensure they stay visible for the completion of the event. This requires bringing :hover back in to the equation. As it is only used for a brief duration, it is more palatable than using it to power the main menu interactions. The amended selector is below:

Now we're done, or at least as done as I care to be for this experiment. Some things do remain, such as prettier styles, but this is only a technical demo. Lastly, this menu cannot have sub-sub-menus as giving the second level menu item focus would necessarily remove it from the top level and the second level would collapse before the third could be shown. I think at that point, though, a rethink of the design might be warranted. In addition, navigation with a keyboard does not work here because in order to select a second level item, focus must be removed from the trigger, which collapses the menu.

For a complete all-in-one example of this, please see the demo page. Thank you for reading.