Blog (my web musings)

Find out what's interesting me, get tips, advice, and code gems that don't fit elsewhere.

Search Blog

Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)

Details

I decided to work more on the previous "CSS-only, Multi-Level, Off-Canvas / Slide-Out Menu (no JavaScript)" code so that it can be used on desktop as well as mobile.

So here is the "Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)":

Demo

Its similar to the previous menu in that it uses the same side-docked, off-canvas menu pattern for mobile, but this new version now also sports a horizontal, dropdown menu bar in "desktop" view, which is just to say "on a wider screen".

The demo uses a media query breakpoint of 960px (expressed as 60ems to make it scalable - How did I get to that figure? 960/16=60 - 16px being default browser font-size), but that's not to say that 960px/60em is the best breakpoint for desktop. This unit was chosen because the example layout dictates it. Reduce your browser window while viewing the demo and you'll see that its an appropriate breakpoint to switch the menu format before it overlaps the logo / header text.

Features

The features are similar to the earlier version;

  • Supports unlimited sub-menus, of infinite depth
  • Uses a nested list format structure
  • Uses CSS3 transitions / transforms 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)
  • "Fly-Left" option provided to reverse the direction of drop-down sub-menus

Compatibility

  • Desktop view: IE7+ (but no right / down arrows in IE7/8)
  • Mobile view: 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 the demo and view the source of the page.

JS enhancement

Additionally, 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-canvas, mobile view, 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:

Demo