The Final Off-Canvas Navigation: Revisited – David Bushell – Freelance Web Design (UK)

By admin

Friday 6 Oct 2023
DATE

So I may have used the word “final” rather ambitiously when I blogged “

The Final Off-Canvas Navigation
WORK_OF_ART

?”

two years ago
DATE

. At least I left the door open with a question mark? I’ve since made big changes to the implementation.


The New (New) Version

ORG

Checkout my new demo on CodePen.

All the good stuff remains like focus state, keyboard navigation, right-to-left styles. This is still experimental I don’t consider it ready to use just yet.

Dialog and Popover

Modern web browsers now support dialog elements and popover attributes. These

two
CARDINAL

allow for accessible interactivity with

zero JavaScript
QUANTITY

. That means less code. There is no longer a need for the “no script” version that looks and behaves differently. Core functionality just works. I’m using a sprinkling of

JavaScript
PRODUCT

for minor improvements.

CSS Animations

My previous version used overflow and scroll-snap to show and hide sub-menus. That proved to be janky and gave little control over the transition effect. Now popover does the hard work with CSS animations.

Adding an opening transition is easy with the :popover-open pseudo-class. Closing transitions are tricky.

Chrome
PERSON

appears to respect closing animations. Other browsers hide the popover immediately. I don’t know what is “spec” here. For now I’ve used

JavaScript
PRODUCT

to delay the actual hidePopover() until the animation ends.

I’ve also found ::backdrop transitions to behave strangely for some CSS properties. In fact this pseudo-element behaves just plain weird from my experience.

Ready to use?

Short answer: I don’t know, so I wouldn’t recommend it. While browser support is strong it’s all very recent. I’d appreciate any accessibility related feedback on this implementation.

Find me at

@dbushell
ORG

and @[email protected] or email me.