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;
- Supports unlimited sub-menus, of infinite depth *
- Uses a nested list format
- Uses CSS3 transitions 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)
* 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
- IE9+ (no slide effect in IE9) *
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
* 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
- Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (with JavaScript enhancement)
- Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (with JavaScript IE7/8 support)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (with JavaScript enhancement)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (with JavaScript enhancement + keyboard 'tab-to' support)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (SwiftClick - no 300ms delay + tap-to-close drop-downs)
- Also see Responsive CSS3 Multi-Level, Push/Slide Menu (no JavaScript)
- Also see Responsive CSS3 Multi-Level, Push/Slide Menu (with JavaScript enhancement)
- Also see Responsive CSS3 Multi-Level, Push/Slide Menu (with JavaScript enhancement + keyboard 'tab-to' support)
- Also see Responsive CSS3 Multi-Level, Fly-Out Menu (no JavaScript)
- Also see Responsive CSS3 Multi-Level, Fly-Out Menu (with JavaScript enhancement)
- Also see Responsive CSS3 Multi-Level, Fly-Out Menu (with JavaScript enhancement + keyboard 'tab-to' support)
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.