This demonstrations uses just CSS, no javascript, jQuery, PHP or any other scripting language. It does use checkboxes so that a transition effect can be applied to the open/close sub menus. The transition effect is a method of having a 'height:0 to height:auto'.

The tree is navigated by 'clicking/tapping' the + or the associated text and an open sub menu has a - in place of the +.

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.

The simple 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.