Beverleyh

Responsive Multi-Level, Push/Slide Menu

0 Comments

, 05-22-2014 at 02:24 PM (31900 Views)

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;
Code:
#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;

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;

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 http://fofwebdesign.co.uk/freebies_f...-side-menu.htm 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: http://fofwebdesign.co.uk/freebies_f...de-menu-js.htm

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