MENU
Date : 7th October 2021

Click/Tap the MENU text at the top right of the screen.




Information

This demonstrations uses just CSS, no javascript, jQuery, PHP or any other scripting language. Also NO checkbox or radio inputs. Just plain HTML.

Another detail/summary multi-level tree menu that uses minimal CSS to have the tree stay open as you 'click/tap' navigate but this time with closing animation.

The CSS menu action is just 4 lines, the rest of the CSS is to style the look of the text (total of 14 lines of CSS). Also the CSS does not need to be updated for any menu structure. Just follow the html menu structure using detail/summary for the level text.

All text preceded by a 'right arrow' can be 'clicked/tapped' to open another menu level. The right arrow will change to an 'down arrow' which can be clicked/tapped to close that menu level and any further sub levels.

The tree will initially start with the menu sub levels closed. But if you close the menu with any sub levels open, these will still be open when the MENU is opened again.

So to open the menu simply click the MENU text at the top right of the screen and to close the menu click the MENU text again.

The menu will cover 320px of the screen width and will allow scrolling if the menu becomes to high for the screen height.

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.

Terms and Conditions

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.

Please consider making a donation, every little helps.