CSS PLAY
Doing It With Style
Absolutely no javascript/jQuery or any other progamming language, just CSS.
Also no inputs, radio, checkbox, summary/detail etc. Just focus and focus-within.
This is a simple tree menu that works with any number of branches and links without any change to the CSS.
In this demonstration I have shown 4 different tree menus that all use the same stylesheet which can be used on any number of tree menus with any number of branches.
It also uses the old method of animating max-height to give a slide action to open each branch. There are newer and better methods of animating from 0 to auto height, but this method works on older browser versions.
Click/tap any of the hamburger above to open the first level.
Click/tap the bold text to open that branch, and also to close that branch including any open sub branches.
To close the menu you can click/tap the cross or click tap anywhere off the menu. This will also close any open sub branches.
Opening another menu will close any current open menu.
So a simple tree menu using just :focus and :focus-within that works in all the latest browsers.