Responsive CSS3 Multi-Level, Push/Slide Menu (no JavaScript)
This responsive menu provides a permanently visible desktop menu to compliment the earlier CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript).
Desktop (> 960px): Look left to see the always-visible vertical menu, and click/tap to trigger subs...
Mobile (< 960px): Give that ☰ icon in the top-right corner a click to open the "off-canvas" menu...
Features
A CSS-only, responsive menu that;
- Supports unlimited sub-menus, of infinite depth *
- Uses a nested list format
- Uses CSS3 transitions to animate the "off-canvas" slide effect (no JavaScript)
- Uses the "advanced checkbox hack" to activate "off-canvas" 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, which requires each sub-menu to be closed in turn, meaning visitors need to keep clicking the large "back" ◄ arrows to get back to the main menu, and in the case of mobile, until the final × comes back in to view. To temper the clunkiness, here's a responsive 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
- Desktop: IE7+ (alternative fly-out menu for IE7/8) / Mobile: IE9+ (no slide effect in IE9) *
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
* IE8 and under is covered with an alternative fly-out menu, while IE9 and above gets the checkbox push/slide version along with all other modern browsers.
I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything screwy.
Related
- Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript)
- 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 (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.