CSS PLAY
Doing It With Style
This demonstrations uses just CSS, no javascript, jQuery, PHP or any other scripting language.
ALSO NO inputs, checkbox, radio, labels or hacks.
This is a multi-level tree menu that uses minimal CSS to have the tree stay open as you 'click/tap' navigate.
At last a simple tree menu to rival those produced by javascript/jQuery.
This makes use of the CSS pseudo-class :focus-within.
I have used 'tabindex' to allow the paragraph text to have :focus, and the used li:focus-within to target all list items containing a p:focus element and keep all their ul structures open.
You can close all open sub menus by click/tapping the 'X' or click/tapping anywhere off the menu.
I have also use my latest method of having a slide down effect from height:0 to height:100% using display:grid and transitioning 'grid-template-rows' from 0 to 1fr.
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.