HeadlinesBriefing favicon HeadlinesBriefing.com

Tiny HTML pages replace JS menus with CSS transitions

Hacker News •
×

A developer revisits his earlier experiment of stitching together many tiny HTML pages as a replacement for JavaScript‑heavy widgets. By treating each UI element—such as a site menu—as a separate document, the site relies on plain <a> links and augments the experience with CSS view transitions. Modern browsers render a smooth slide, while older or JS‑disabled browsers fall back to a basic page load.

On the author’s blog the “Menu” link points to /menu/, which displays only navigation options. Inside that page the link swaps to an “X” that points back to /. A tiny inline script checks document.referrer; if the user arrived via another page it calls history.back(), otherwise it forces a direct navigation. This trick prevents the menu open/close actions from cluttering the browser history.

The approach forces designers to think of the browser as a document navigator rather than a JavaScript runtime. Page weight stays tiny, load times stay fast, and the UI remains usable on any device that can follow a link. In practice, this method delivers a functional, graceful‑degradation menu without relying on heavy client‑side frameworks.