This content originally appeared on Go Make Things and was authored by Go Make Things
In last week’s article on the ideal browser support strategy in 2022, I wrote:
Things can fail if JS is unsupported if they’re “nice to have” features. Anything critical needs to work without JavaScript.
In response, reader Caleb Stauffer asked how I would handle a flyout or drawer nav menu (“think mobile with a hamburger icon” - shared with permission).
I’ve mostly moved away from that pattern in general, but if I did need to use it for something today, I would either…
- Treat it as a fully expanded and visible navigation, and progressively enhance it into a flyout once the JS loads, or
- Have the nav in the footer by default, with the hamburger functioning as an anchor link. When the JS loads, I’d progressively enhance it into a flyout.
A lot of folks assume that progressive enhancement means having to write the same code twice, but often, it can be as simple as extending the pattern you already have once the JS loads.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-02-01T15:30:00+00:00) How to progressively enhance a nav menu. Retrieved from https://www.scien.cx/2022/02/01/how-to-progressively-enhance-a-nav-menu/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.