CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript)

Give that   / 3-line-stripy / 'hamburger' icon in the top-right corner a click to start things rolling...

Features

A CSS-only, "off-canvas" menu that;

* Although an infinite number of nested sub-menus is possible, you'll probably want to stop at 2 or 3 deep due to the use of checkboxes as triggers. This method requires each sub-menu to be closed in turn, meaning visitors need to keep clicking the large "back"   arrows until the final  ×  comes back in to view. Not the most user-friendly idea, so for that reason, I've provided a menu enhanced with JavaScript where the menu/sub-menus can all be closed in one go (the JavaScript function unchecks all checkboxes).

Please view the source of this web page to grab the CSS and HTML markup.

CSS Transforms and the "position:fixed" bug in Safari

When CSS Transforms are used (as this menu does), there is a known buggy behaviour in Safari that affects child "position:fixed" elements. What happens is that it seemingly forces them to adopt a "position:absolute" placement, while forcing their immediate parents to "position:relative". This causes some very strange (and frustrating) results. There is an easy fix here though - apply this CSS if you have any "position:fixed" elements inside ".container";

/* #### - corrects 'unfixing' bug in Safari - #### */
@media screen and (-webkit-min-device-pixel-ratio:0) { .container { -webkit-transform:none !important } }

Compatibility

* IE8 and under does not appear on any mobile device so the fact that this menu doesn't work there isn't really a problem. IE8 doesn't support media queries either so you can just serve an IE8 desktop stylesheet (and IE8 menu) to those visitors. Alternatively, try this version of the multi-level, off-canvas mobile menu that works in IE7/8.

I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything hinky.

Related

Freebies

Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.