Overview
This demo starts with a core experience delivered to small screen devices with a mobile-first approach. In the absence of javascript the navigation icon will degrade gracefully to a traditional jump link down to the website footer that offers navigation links. Alternatively the fallback navigation could send the user to a sitemap page.
The navigation is progressively enhanced for those browsers that support javascript. In this scenario the navigation link is hijacked by the script which toggles a class applying styles responsible for moving the primary navigation panel on and off the screen using the CSS left property. The default styles for the navigation panel mean it's hidden from view off the left of the viewport. By moving the main container over to the right and hiding the overflow, we pull the navigation menu into view.
An extra enhancement layer is added for modern browsers. With javascript we first detect if the browser supports translate3d transformations. If support is available, some extra styles are applied to reset the left positioning and instead transition the menu on/off screen using CSS3 transformations to enhance performance.
On screen sizes capable of displaying the navigation permanently, media queries are used to reformat the page accordingly.
This demo does not bother to patch media query support for older versions of IE. This could easily be achieved using a script such as respond.js or by serving an IE only stylesheet.
Note!
I came across two issues when implementing this demo. The first was because I had used an old image replacement technique on the navigation icon that made use of a large negative pixel value. This had large performance implications as the browser was having to redraw a large box off screen. The second issue was an obvious flicker when the main container was transitioned with the translate3d transformation, most noticeable on android devices. To remedy this I had to set an empty translate3d property - transform: translate3d(0, 0, 0); to the default styles for this element. I'm not sure why but applying these redundant styles before the hamburger icon was clicked did the trick.
Resources
- coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
- bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/#off-canvas
- tiffanybbrown.com/2012/09/04/testing-for-css-3d-transforms-support/
- bradfrost.github.io/this-is-responsive/patterns.html
- developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support
- www.lukew.com/ff/entry.asp?1514
- paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
- toddmotto.com/creating-jquery-style-functions-in-javascript-hasclass-addclass-removeclass-toggleclass/
- jasonweaver.name/lab/offcanvas/technical/
- www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
Lorem Ipsum
Curabitur lectus purus, ultricies sodales placerat et, sollicitudin vitae massa. Sed massa libero, ullamcorper sit amet ornare et, faucibus vestibulum erat. Proin hendrerit dolor in libero accumsan et tempus mauris viverra. Praesent ornare lobortis vehicula. Nulla sit amet velit lorem. Phasellus non lacus dui, eget egestas nibh. Aenean semper urna sed nibh fringilla tristique. Donec a risus purus, sit amet pretium erat. Mauris semper leo ut nisi pellentesque eget aliquam nulla consequat. Proin eget mauris ligula. Integer nec diam orci, non suscipit nisl. Nulla ut nisl ut diam posuere tincidunt malesuada nec risus. Nunc egestas semper neque eu congue. Praesent tempus ultrices accumsan. Etiam ac lorem sed turpis semper imperdiet. Proin id orci enim, dignissim adipiscing lectus.
Phasellus et pharetra nibh. Morbi congue nunc congue neque dignissim congue. Morbi molestie tellus vel arcu viverra pulvinar. Aliquam non orci ac diam ornare placerat non ac mi. Integer rhoncus, mi at rhoncus pulvinar, odio nunc laoreet dolor, eget tincidunt mauris ligula sed quam. Nunc tincidunt malesuada erat, in viverra elit porta ut. Duis ultricies, est a euismod mattis, odio arcu ornare nulla, nec condimentum sem nisl eu purus. Nulla nisi elit, rutrum sed gravida ut, auctor quis lacus. Ut tincidunt dolor nec eros condimentum sed volutpat urna ornare. Maecenas mattis fermentum vehicula. Sed nisi lacus, molestie at fringilla sit amet, aliquam id lacus. Nullam rhoncus vulputate bibendum. Integer sit amet ipsum id purus auctor tempor. Donec sit amet quam dui.
Proin convallis odio in sem pellentesque tristique. Donec elementum, risus ac varius sodales, odio neque dapibus mi, a tincidunt odio elit adipiscing nibh. Pellentesque aliquet pellentesque vehicula. Morbi ut justo sed urna luctus tempor id id magna. Aenean blandit sapien a dui bibendum quis ullamcorper turpis luctus. Maecenas varius ipsum vitae justo euismod nec hendrerit eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non sapien vitae dolor viverra aliquet mollis at eros. Vestibulum ligula erat, mattis quis vulputate vitae, consectetur dignissim sem. Etiam volutpat mollis nunc, eu semper odio gravida in. Aliquam erat volutpat. Nunc venenatis, nibh non viverra viverra, tortor enim lobortis ante, feugiat cursus ante urna et diam. Duis mattis nunc vitae magna molestie lacinia. Donec a elit non arcu varius malesuada quis nec nibh.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sed magna velit, at rutrum sapien. Ut velit orci, dapibus at imperdiet eu, tristique gravida turpis. Fusce viverra dapibus fringilla. Aenean ac risus nec tellus suscipit cursus non vestibulum augue. Vestibulum adipiscing eros a arcu consequat faucibus. Etiam diam lacus, viverra vel gravida at, malesuada sit amet nulla. Nunc commodo libero neque, at aliquam justo. Quisque non augue leo, eget pulvinar mauris.