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.

All the text in the menu can be links to other pages or external websites and the tree is navigated by 'clicking/tapping' the folders to the left of the link text. These folder 'images' are imoji character code & # 128194 and are colored using filter: greyscale.

The tree will always start with the menu sub levels closed and clicking the 'X' to close the menu will also close any open sub levels.

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 50% of the screen on wide screens. But on smaller screens it will cover 100% of the screen width.

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.