Exploring Pure CSS Navigation

December 11, 2020

In the last article I've written, I've taken a look at how Apple built their mobile navigation to degrade gracefully without JavaScript.

I received a tweet from Šime Vidas who kindly went through the trouble of running the site through VoiceOver on OSX and pointed out that Apple's solution has two problems:

  1. Opening and closing the menu doesn't set focus to the correct element - when activating the "open" anchor tag, the target is the hidden checkbox, requires one tab press to move onto the "close" anchor, and another tab to the first menu item.
  2. You cannot trap focus, which allows the focus to move behind the slide down menu.

Now, For Apple this is not big deal because the CSS only behaviour is simply graceful degradation, it's not designed to work 100% without JavaScript, but I am somewhat obsessed with CSS only UI so I ask myself "could it be fixed?"

And I tried my hand at create pure CSS navigations.

Note: I did not implement animation, as these are just proof of concepts.

Toggle Menu with Autofocus

See the Pen CSS Menu - Autofocus by Shaw Jia (@Miragecraft) on CodePen.

An improvement - I hope - upon Apple's solution, by implementing autoffocus.

To avoid focus from going behind the menu, I shift the content below the menu when it is opened. So focus is not trapped, but still quite accessible.

Is there truly no way to trap the focus?

Toggle Menu with Focus Trapping

See the Pen CSS Menu - Focus Trap by Shaw Jia (@Miragecraft) on CodePen.

Without the ill-fated nav-index property, how do we trap the focus within the menu?

My solution is, remove the content with display:none.

I suspect hiding the content creates unwelcome context switching for users, but it's certainly the only way to trap focus without JavaScript.

Overlay Menu

See the Pen CSS Menu - Overlay by Shaw Jia (@Miragecraft) on CodePen.

Now I tried something else - an auto-expanding menu that opens up as soon as header receives keyboard focus.

A "skip to content" link is added for usability.

No need for anchor links, it's automatic!

Hideaway Menu

See the Pen CSS Menu - Hideaway by Shaw Jia (@Miragecraft) on CodePen.

A twist on the auto-expanding menu, instead of overlaying and obscuring the content, the menu is inserted between header and content within the document flow.

Cool!

Pullup Menu

See the Pen CSS Menu - Pullup by Shaw Jia (@Miragecraft) on CodePen.

I remember reading articles about having hidden menu items causing users to not visit them, so here's a solution for it - the Pullup Menu.

The menu is visible at all times, normally sits above the footer so you can choose what to do once you finished reading the current page.

The menu button and keyboard focus within header will pulls up the menu from the bottom when pressed.

It could be a bit disorienting for keyboard user to unable to access the menu at the end of the page when it's visually present, but probably not hard to get used to.

So there it is, 5 different variations of fully accessible, CSS only mobile menu.

I *might* have overdone it, but it was fun.