How to Build an Unambiguous Submenu With Pure CSS and HTML (No JavaScript)

Here are two solutions for unambiguous submenus, using pure CSS and HTML and no JavaScript.

In his CSS-TRICKS post “In Praise of the Unambiguous Click Menu“, Mark Root-Wiley convincingly concludes that “Visitors are reasonably confused by hover menus”, and that “There is no standard implementation when it comes to hover menus, so we need to do something different to provide a consistent user experience”. Before I talk about Mark’s proposed alternative of a click-menu, I want to propose one more type of hover menu, that might be suitable in some cases.

HTML bookmarks hover menu

One of the solutions for the parent menu-item ambiguity Mark justifiably dismisses is linking the parent menu-item “to a page containing useless fluff content or only the links in the submenu” (setup 4 in his diagram).

Consider, instead, the following setup (let’s call it setup 5): the parent menu-item links to a meaningful page – example.com/about – while its sub-items are bookmark links linking to HTML anchors for sections on the same page their parent item links to – example.com/about/#about-myself and example.com/about/#about-my-methodes. By default, clicking the bookmark links will bounce the visitor directly to the section, which can be a bit disorientating (the user might not realize he can scroll up for more content). This can be solved with a simple:

html { scroll-behavior: smooth; }
Code language: CSS (css)

Now we’ll have a smooth scrolling effect, that hints to the visitor he is somewhere inside a scrolled page.

This setup might not be perfect, but I believe it is a good one to consider in some cases.

Now, about Mark solutions – click menus…

How to build a click menu with pure CSS and HTML (No JavaScript)

Mark offers parent menu-items serving as toggle buttons for submenus. He shares his implementation code, which uses JavaScript. I myself am a big fan of pure CSS and HTML solutions, so here is one (excuse my poor design):

Pure HTML and CSS Click Menu (No JavaScript)

The above version includes a close button. You can give up the close button and get an even shorter and simpler code, with one caveat: not having a close-intent click element (clicking the top menu item again won’t close the submenu). This might not be so bad, as every click outside the submenu will close it. Including, of course, a click on another top menu item.

Code notes

  • This is a basic proof-of-concept, with no stress on accessible markup, as ARIAs for example. I’m not an accessibility expert. If ARIAs are a must, it might be necessary to resort to JavaScript in order to toggle their values. But still, at least the basic menu functionality won’t be a victim of JavaScript glitches.
  • The whole thing is :focus-within-based.
  • tabindex="0" enables focusing a simple <span> (an empty href link would’ve worked as well).
  • A label for an input placed outside the navigation enables bouncing the focus outside the submenu on click, unfocusing the submenu, and closing it.
  • Tab-navigation automatically navigates through all the sub-items, which seems a more accessible behavior. This is, anyway, the way the Genesis Framework behaves.

How to do it on WordPress?

If you can’t find a hook for filtering your menu’s HTML, try using this hack.

Conclusion

Following Mark Root-Wiley’s post, I tried to suggest another setup for a hover menu and a JavaScript-free version for Mark’s proposed click menu.

Leave a comment

Your email address will not be published. Required fields are marked *