- #RESPONSIVE CSS3 MENU PC#
- #RESPONSIVE CSS3 MENU SERIES#
Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (with JavaScript IE7/8 support). Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (with JavaScript enhancement). Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript). I haven't been able to test in other browsers/devices but feedback is always welcome. IE8 doesn't support media queries either so you can just serve an IE8 desktop stylesheet (with the desktop menu CSS) to those visitors. * IE8 and under does not appear on any mobile device so the fact that the "off-canvas" mobile menu doesn't work there isn't really a problem. Desktop: IE7+ (no right/down arrows in IE7/8) / Mobile: IE9+ (no slide effect in IE9) *. * # - corrects 'unfixing' bug in Safari - # screen and (-webkit-min-device-pixel-ratio:0) There is an easy fix here though - apply this CSS if you have any "position:fixed" elements inside ".container" This causes some very strange (and frustrating) results. What happens is that it seemingly forces them to adopt a "position:absolute" placement, while forcing their immediate parents to "position:relative". When CSS Transforms are used (as this menu does), there is a known buggy behaviour in Safari that affects child "position:fixed" elements. To trigger the "go-up" menu, just put a class of "go-up" on the parent tag ĬSS Transforms and the "position:fixed" bug in Safari The "Focus on Function > Services" menu is an example of this. To counter this, a "go-up" option is available to change the vertical direction of drop-downs. Long, nested drop-down menus will eventually fall off the bottom of the screen. The only way to close an opened menu is to click/tap on another link (see the iOS 'Sticky Hover' fix). On a desktop PC this isn't a problem because the menus hide again once you hover away, but on touch-devices, hovers are replaced with clicks/taps so you cannot hover away to hide the menu.
You can actually reverse the fly-out direction half-way through a series of nested sub-menus too, however, please be aware that on iPad (where the desktop menu is also likely to be visible), this can lead to the reversed fly-out sub-menus obscuring parent menu buttons. To trigger the "fly-left" menu, just put a class of "fly-left" on the parent tag Mobile ( Previous JemCons" menu is an example of this. This responsive menu is a step on from the CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript) and provides both a mobile and desktop view of the menu.ĭesktop (> 960px): You'll see a familiar-looking horizontal, drop-down menu bar at the top of the screen. This version has been replaced by a version with better support for tap-activated sub-menus on touchscreen. You are here: Home / Freebies For Websites Article → Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)
0 kommentar(er)
