Blog (my web musings)

Search Blog

Multi-Level, Off-Canvas Menu with IE7/8 support

Details

Published: 28th Oct 14

Hidden side menus, like the ones used in Facebook and YouTube apps, are a space-saving alternative to traditionally visible desktop menus. This post introduces an upgrade to the earlier CSS-only off-canvass menu, that makes it possible for IE7/8 users to enjoy this menu too.

All the features are the same as the CSS-only version - the difference here is that JavaScript makes it compatible with earlier versions of Internet Explorer (IE7/8).

Now, because this menu builds upon the CSS-only version, it continues to use the checkbox hack, which is what makes functionality possible, without JavaScript, in modern browsers. But, the checkbox hack doesn't work in IE8 and earlier because the ":checked" pseudo class is unsupported in IE before version 9. So, for IE7/8 support, we must do something different - I decided to toggle a class on active menus, styling them open and closed, when needed, with CSS.

Adding JavaScript

Here's the goNav() JavaScript function that toggles the additional class. "sub-nav" is the default class that is always present, and "nav-ie" is an additional class that is added and removed onclick;

You can see how this 'nav-ie' class is used in the CSS, inside an IE conditional stylesheet. Remember that CSS transforms are not supported in these early versions of IE, so they get a basic left position switch - no slinky slide effect, but at least the menus are made visible (they are initially hidden "off-canvas" with a negative left position of -13.75em);

Finally, the existing uncheckboxes() function that closes all sub-menus in one go in modern browsers, now carries a bit of extra JavaScript to remove all instances of the "nav-ie" class, which again, closes all sub-menu in one go, but for IE7/8;

That's the sub-menus dealt with. To completely close the menu and return it to it's hidden, "off-canvass" state, I'm going to call the goNav() JavaScript function on the × labels - there's one right after the opening #menu div, and another just before the closing #menu div - they'll end up looking something like this;

But wait! It's all well and good talking about how to open and close sub-menus in IE7/8 with JavaScript and classes, but I haven't actually yet covered the very first step of opening the menu from its "off-canvass" position! That's very easy to handle when JavaScript is enabled - just put the goNav() function on the ☰ icon;

Problems arise when JavaScript is disabled though - those IE7/8 users won't be able to access the menu at all, so I propose this workaround; Use <noscript> tags to serve a static link to your website's sitemap;