This demonstrations uses just CSS, no javascript, jQuery, PHP or any other scripting language AND it does not use radio or checkbox inputs.

In fact the open and close states of the sub levels does not use CSS at all, this is pure HTML.

The CSS just styles the look of the menu and not the working.

The tree is navigated by 'clicking/tapping' the folders or the associated text. These folder 'images' are imoji character code & # 128194 and are colored using filter: greyscale.

An open sub menu will stay open until the folder or associated text is clicked/tapped again.

So to open the menu simply click the three bar icon at the top right of the screen and to close the menu click the 'X' at the top right of the menu panel.

The menu will cover 60% (max-width 720px) of the screen on wide screens. But on smaller screens it will cover 100% of the screen width.

Opening the menu panel will also limit the page height to 100vh so that the page will not scroll. The menu text will stay centered in its panel. But if it gets to tall for the menu panel then it will scroll so that all the menu links are accessible.

Unfortunately there is no way, at the moment, to have animation on the closing of a level. But the benefit is that the CSS will not change for any menu structure. You can add top levels or sub levels and the CSS will stay the same.

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.