The Final Off-Canvas Navigation: Revisited
So I may have used the word “final” rather ambitiously when I blogged “The Final Off-Canvas Navigation?” two years ago. At least I left the door open with a question mark? I’ve since made big changes to the implementation.
The New (New) Version
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
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
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.
A closing thought: do you really want your entire navigation dumped into an off-canvas