This demonstrations uses just CSS, no javascript, jQuery, PHP or any other scripting language.
This is a multi-level tree menu that uses minimal CSS to have the tree stay open as you 'click/tap' navigate.
To open the menu simply click the three bar icon at the top right of the screen. This will then change to an 'X' which can be clicked to close the menu.
The menu panel will slide in from the right and the page height will be limited to 100% so that it cannot scroll while the menu is visible.
The menu will always start with the sub menus closed, even if the menu panel is closed while displaying a sub menu structure.
This makes use of radio inputs to keep the menu structure open. It uses the radio input id to open a new sub menu and also to keep any parent menu open. It does this using multiple classnames for each id and using the :checked status of these classnames to keep that tree structure open.
So this menu will work in an identical way to those created using javascript/jQuery.
I think that this is about as far as CSS can be taken to emulate javascript/jQuery tree menus, but who knows, maybe one day, CSS can be used to style parent elements.
The stylesheet is in the page head so that you can see how few lines of CSS are required, but please note the copyright information at the bottom of this page.
This demonstration can be used subject to the following terms and conditions.
1. If you wish to use this demonstration in your website(s) please email me seeking permission.
2. You may NOT place this demonstration on another site for others to download.
3. You may NOT redistrubute or resell this demonstration.
4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
5. If you are using this on a personal web site then please retain the copyright comment in the stylesheet. A support donation would be appreciated for the use of this demonstration.
6. If you are using this on a commercial web site, or as a paying job for a client, then please e-mail me asking for permission - and in this case a support donation is required.