Blog (my web musings)

I recently worked on a mobile forum with off-canvas / 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.

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:

Demo

Features

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 the demo 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:

Demo