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

You are here: Home / Freebies For Websites

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

Here is another responsive menu that adds a desktop layout to the earlier CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript).

Desktop (> 960px): Look left to see the always-visible vertical menu, and hover/tap to trigger subs...

Mobile (< 960px): Click/tap that ☰ icon in the top-right corner to open the "off-canvas" menu...

Features

A CSS-only, responsive menu that;

Supports unlimited sub-menus, of infinite depth *
Uses a nested list format
Uses CSS3 transitions 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)
Has a "Go-Up" option to change the vertical direction of fly-out sub-menus

* Although an infinite number of nested sub-menus is possible, you'll probably want to stop at 2 or 3 deep due to the sub-menus that progressively fly across the screen in desktop view and the use of checkboxes as triggers in mobile view. The checkbox method requires each sub-menu to be closed in turn, meaning visitors need to keep clicking the large "back" ◄ arrows until the final × comes back in to view. To improve the experience, I've provided a menu enhanced with JavaScript where the menu/sub-menus can all be closed, and the menu hidden again, in one click (the JavaScript function unchecks all checkboxes).

Please view the source of this web page to grab the CSS and HTML markup.

Go-Up (desktop view)

Long nested menus will eventually fall off the bottom of the screen. To counter this, a "go-up" option is available to change the vertical direction of sub-menus. In otherwords, to make them go upwards. The "Focus on Function > Services" menu is an example of this.

To trigger the "go-up" menu, just put a class of "go-up" on the parent <li> tag;


		<li class="go-up"><a href="#">Services</a> <label for="fof-services" class="toggle-sub" onclick="">&#9658;</label>

		<input type="checkbox" id="fof-services" class="sub-nav-check"/>    

		 <ul id="fof-services-sub" class="sub-nav">

		    <li class="sub-heading">Services <label for="fof-services" class="toggle" onclick="" title="Back">&#9658;</label></li>

		    <li><a href="#">Content Management</a></li>

		    <li><a href="#">Graphic Design</a></li>

		...

CSS Transforms and the "position:fixed" bug in Safari

When CSS Transforms are used, there is a known buggy behaviour in Safari that affects child "position:fixed" elements. What happens is that it seemingly forces them to adopt a "position:absolute" placement, while forcing their immediate parents to "position:relative". This causes some very strange (and frustrating) results. There is an easy fix here though - apply this CSS if you have any "position:fixed" elements inside ".container";


		/* #### - corrects 'unfixing' bug in Safari - #### */

		@media screen and (-webkit-min-device-pixel-ratio:0) { .container { -webkit-transform:none !important } }

Compatibility

Desktop: IE7+ (no fly/fade effect in IE7/8/9) / Mobile: IE9+ (no slide effect in IE9)
Chrome
Safari
Firefox
Opera
Android
iOS

Please be aware that touch screen desktop/tablet users have to tap the indicator arrows to open sub-menus, and fly-out sub-menus are likely to obscure page content until another link is clicked (see the iOS 'Sticky Hover' fix).

I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if anything goes awry in other browsers.

Freebies

Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.