View RSS Feed


Responsive Multi-Level, Push/Slide Menu

Rating: 27 votes, 5.00 average.
I was emailed the other day by somebody asking if my earlier CSS-Only Multi-Level, Off-Canvass Mobile Menu could be visible on desktop too.

At its most basic level, the following CSS inside of a desktop media query will do that;
#menu { left:0 }
.container { padding-left:13.75em }
Except this stumps IE8 and under because of no media query support and no checkbox hack support. So I set to work on creating a version that is visible (and works) on desktop and older browsers.

First Problem
The basic CSS above does a reasonable job, and looks/works fine on my small 1280px monitor. Its a different matter on a 1920px wide screen though - here's the result;
Click image for larger version. 

Name:	problem-1.jpg 
Views:	1507 
Size:	18.6 KB 
ID:	5465
A column of content with big white margins at each side. Not good. You could increase content to 100% width, which might work well in some wide-screen, masonry layouts, but I imagine that lots of people would want to restrict content width, past a certain point, to maintain some control. Which leads to...

Second Problem
I set a max-width on the <body> tag while testing, and discovered that those off-canvass sub-menus aren't so off-canvass anymore;
Click image for larger version. 

Name:	problem-2.jpg 
Views:	1373 
Size:	18.1 KB 
ID:	5466
Nasty! But how to deal with it?...

Well, after a bit of thought, and much faffing with z-index, opacity and positioning of sub-menus, I hit on the idea of using a pseudo element, placed to the left the #menu div, to cover the off-canvass sub-menus... And it worked a treat!

The simplest way is to set overflow:hidden; on #menu (doh!)

Here is the improved, responsive menu - offering desktop and mobile off-canvass functionality. I call it " Responsive CSS3 Multi-Level, Push/Slide Menu (no JavaScript) "

Key Features: same as the mobile only version;
  • 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)

* Keep it sensible and user-friendly - 2 or 3 sub-menus is usually enough.

Compatibility: Should be fine on all modern browsers and IE9+ (the menu works in IE9 but there is no slide effect). IE8 and under is covered with an alternative fly-out desktop menu.

For more info and to grab the CSS and HTML, please visit and view the source of the page.

JS enhancement
Additonally, I've also provided a JavaScript-enhanced version of this responsive menu - a few very short lines of code to uncheck all checkboxes of the off-canvass sub-menus 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 back to the CSS-only version. The JS enhanced menu is here:

This came with its own challenges - Chrome handles z-index differently to Firefox and IE, which means that there is a bit of extra markup and CSS to workaround those differences. More on that in the actual demo page with JavaScript.

I hope you find it useful

Submit "Responsive Multi-Level, Push/Slide Menu" to Submit "Responsive Multi-Level, Push/Slide Menu" to StumbleUpon Submit "Responsive Multi-Level, Push/Slide Menu" to Google Submit "Responsive Multi-Level, Push/Slide Menu" to Digg