View RSS Feed

Beverleyh

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

Rating: 9 votes, 5.00 average.
I decided to work more on the previous "CSS-only, Multi-Level, Off-Canvass/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)".

It's similar to the previous menu in that it uses the same side-docked, off-canvass 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 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-canvass slide effect (no JavaScript)
  • Uses the "advanced checkbox hack" to activate off-canvass 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 http://fofwebdesign.co.uk/template/_...i-rwd-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, 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: http://fofwebdesign.co.uk/template/_...wd-menu-js.htm

Enjoy!

Submit "Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)" to del.icio.us Submit "Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)" to StumbleUpon Submit "Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)" to Google Submit "Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)" to Digg

Updated 06-03-2014 at 08:28 PM by Beverleyh

Tags: None Add / Edit Tags
Categories
CSS related

Comments

  1. Beverleyh's Avatar
    What the?.... Somebody had my menu listed and was selling it on codecanyon. I posted it here on 1st April, and the unscrupulous person started selling it about 10 days ago (17th June?). I stumbled on the listing via this Tweet: http://www.jqueryrain.com/2014/06/re...3-canvas-menu/

    How cheeky!

    The listing has now been pulled but I took screen caps of what they copied and sold as their own. The markup structure, CSS and comments, even the wording of the features list and meta description was a blatant copy.

    http://fofwebdesign.co.uk/freebies_f...yon/jnix01.png
    http://fofwebdesign.co.uk/freebies_f...yon/jnix02.png
    http://fofwebdesign.co.uk/freebies_f...yon/jnix03.png
  2. Beverleyh's Avatar
    Just a note that this menu has been replaced with a version that has better tap-support for the desktop view on large screen touch devices;

    UPDATED Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript): http://fofwebdesign.co.uk/freebies_f...-down-menu.htm

    UPDATED Responsive CSS3 Multi-Level, Drop-Down Menu (with JavaScript enhancement): http://fofwebdesign.co.uk/freebies_f...wn-menu-js.htm

    And for a menu where sub-menu drops-downs can be closed by tapping anywhere in the surrounding area, try this: http://fofwebdesign.co.uk/freebies_f...swiftclick.htm