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

Created on November 12, 2023 at 10:52 am

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.

Connecting to Connected... Page load complete