Hacker News Reader

Does anyone else notice that many 'hamburger menus' don't work when JS is disabled? It would be considerate to use the <details> element to make a hamburger menu work with JS disabled, for that dynamic effect. Note: I surf the web with JS disabled by default, and only run JS on sites I trust (i.e not Youtube who are known to fingerprint you with webgl)

View on HN

I'm not sure how much <details> can be customized, but there's also a CSS-only route using a hidden checkbox beneath the hamburger icon and looking for the input[type="checkbox"]:checked selector. (Example: https://codepen.io/plavookac/pen/qomrMw)

you could also use the checkbox trick to make this work without javascript before <details> (and in e.g. ie11). Although <details> is amazingly widely supported, weirdly I had never heard of it until very recently.

Reply on news.ycombinator.com