Advanced Search

View RSS Feed

Beverleyh

CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)

Rate this Entry
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/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

Submit "CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)" to del.icio.us Submit "CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)" to StumbleUpon Submit "CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)" to Google Submit "CSS-only, Multi-Level, Off-Canvass/Slide-Out Menu (no JavaScript)" to Digg

Updated 04-14-2014 at 10:11 AM by Beverleyh

Tags: None Add / Edit Tags
Categories
CSS related

Comments