The demo is available on Firefox from version 114 by enabling the 'dom.element.popover.enabled' preference (needs to be set to true) flag in about:config. See mdn web docs Using the Popover API

This is a development of the previous 'popover' slideout menu.

A simple nested tree menu that can be opened and closed by a click/tap on icons ☰ to open a menu level and ✕ to close a level.

Click/tap the hamburger menu icon at the top right of the screen to open the menu.

Click/tap the ✕ icon to close an open menu and also to close all later sub menus in that branch, and click/tap anywhere outside the menu structure to close all open levels.

All this is achieved using buttons and popovers with no javascript/jQuery, radio or checkbox inputs, JUST HTML & CSS.

All menu items can be links, with just the button icons doing all the work in opening and closing sub menus.

Again, as with the previous menu, the CSS is simple and will be even simpler when all browsers support the 'anchor' style. At the moment the sub menu items need to be manually placed from the top level button, but 'anchor' will allow you to place all sub menus relative to their buttons

I have also added a css animation which is triggered when the menu is opened.