Trevox Studio Test Area

Similar in style to the hover-start menu, this version is 3-level and toggled by clicking on the 'hamburger' menu icon. <style> /* pure css toggleable window */ /* id #toggleinner substituted for class .toggleable-window */ #toggleinner input.toggle {   display: none; } #toggleinner label {   color: white;   font-size: 3em;   font-weight:bold; } #toggleinner label:hover, #toggleinner label:focus {   cursor: pointer; } #toggleinner input.toggle:checked ~ label {   font-weight:normal; } #toggleinner input.toggle:checked ~ div {   display: none; } #toggleinner div {   position: absolute;   width: 100%;   background: magenta; } #toggleouter {   position: fixed; /* relative; */   top:-1em;   left:40%;   width: 10em;   z-index:999; } /* after http://bytutorial.com/blogs/css/css-vertical-fly-out-menu */ /* Remove margin, padding and list style of UL and LI components *...

To minimize screen area taken up, the top level deliberately contains just one item. Both the style and the HTML components are in an 'HTML/Javascript' gadget located in the the Blogger page footer area. This is for simplicity during design and development.  Once finalized, the Blogger template may be editted directly and the coding moved there. The menu style is 'pure CSS' - no Javascript is used. The menu items are simply nested UL's (unordered lists). <style> /* pure css toggleable window */ /* #toggleinner substituted for .toggleable-window */ #toggleinner input.toggle {   display: none; } #toggleinner label {   color: white;   font-size: 3em;   font-weight:bold; } #toggleinner label:hover, #toggleinner label:focus {   cursor: pointer; } #toggleinner input.toggle:checked ~ label {   font-weight:normal; } #toggleinner input.toggle:checked ~ div {   display: none; } #toggleinner div {   position: absolute;   width: 100%; ...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.