Blog (my web musings)

The earlier version of this menu utilises the same checkbox hack and "off-canvas" pattern in desktop view as it does in mobile - apart from being always-visible on a large screen, it looks and works the same, regardless of what device is accessing it (modern browsers and IE9+).

Thanks to the increasing popularity of touch devices, where tappable / clickable triggers now seem more favourable than hover actions, this has the benefit of consistency. Minus the initial trigger in mobile view (hamburger icon, top right) the menu behaviour is the same, so a user can (presumably) move more easily between tablet, phone and desktop, etc., and still anticipate the same actions and results.

On the other side of the coin, for users who do not yet access the internet on mobile or touch devices, its another new behaviour that they must learn in order to navigate the website. OK, it doesn't pose a huge learning curve, but the previous menu split-button design could stump folks for a few seconds while they figure out how to click on the main button to visit a new page or click on the arrow to delve deeper into sub-menus.

It occurred to me that the alternative fly-out hover menu that I had previously provided for IE7/8 users in the "Responsive Multi-Level, Push / Slide Menu" post, is probably more user-friendly / familiar with its hover behaviour, so I have made this the norm for all large screens in this latest edition from what seems to have, for now, evolved into the "Beverleyh responsive multi-level menu blog" :)

Responsive CSS3 Multi-Level, Fly-Out Menu (no JavaScript)

Demo

Behaviour on a Large Screen Desktop

Sub-menus are triggered by hovering over buttons. Click on any button to visit the page.

Behaviour on Large Screen Touch Device

Tap on the main part of a button to visit a page. Tap on an arrow to open a sub-menu that will fly-out across the screen. Tapping on parent arrows will close subs again, except the first-level arrow (that's just going to keep its immediate sub open).

Behaviour on Small Screen Desktop or Touch Device

Tap / click on the hamburger icon to open the menu initially then tap / click on the main part of a button to visit a page. Tap on an arrow to open a sub-menu over the previously visible menu / sub-menu.

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 - subs will progressively fly-out over the screen to the point of no access for narrow screen users!

Compatibility

The desktop view should be fine on all modern browsers, even IE7 (the menu works in IE7/8/9 but there are no fancy effects). The mobile view is good for all modern browsers and IE9+ (no slide effect in IE9).

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

JS enhancement

As usual, 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 sub-menus and return the menu to a closed state in one click. And a fallback for when JavaScript is disabled that returns menu behaviour back to the CSS-only version. The JS enhanced menu is here:

Demo