by, 04-01-2014 at 09:45 AM (20867 Views)
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 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
- 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.