Beverleyh

I recently worked on a mobile forum with off-canvass/slide-out menu. I wanted to keep the project as small and lightweight as possible, so I chose to snub JavaScript and work on a CSS-only solution. The menu was just a simple 1-level effort using the checkbox hack (where you use the :checked state of a checkbox and a connected label to trigger something with CSS), but it was an excuse for me to play around with CSS3 transitions. That example is here: http://m.jemcon.org.uk/phpBB3/

Anyway, I decided to develop it a bit more to see if I could expand the menu and employ multiple checkboxes for a neat, multi-level version.

Here it is - it turned out pretty well: http://fofwebdesign.co.uk/template/_...-side-menu.htm

And these are the key features;

• Supports unlimited sub-menus, of infinite depth
• Uses a nested list format structure
• Uses CSS3 transitions/transforms to animate the slide effect (no JavaScript)
• Uses the "advanced checkbox hack" to activate sub-menus (for Android/iOS)
• Uses "translate3d" to force hardware acceleration in WebKit (no flicker)

Compatibility: Should be fine on all modern browsers and IE9+ (the menu works in IE9 but there is no slide effect)

For more info and to grab the CSS and HTML, please visit http://fofwebdesign.co.uk/template/_...-side-menu.htm and view the source of the page.

UPDATE - JS enhancement
I thought about the sub-menu's back arrows some more yesterday. Depending how many nested lists are in force can make the going-back process a bit of a chore; Due to the use of checkboxes as triggers, you have to work back through the sub-menus in turn to close the menu. So, I have also provided a version with JavaScript enhancement - just a few very short lines of code to uncheck all checkboxes at once and return the menu to a closed state in one click. I also included a fallback for when JavaScript is disabled that returns menu behaviour to the CSS-only one. The version of the menu with JS enhancement is here: http://fofwebdesign.co.uk/template/_...de-menu-js.htm