Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Performance & RWD Implementing Off-Canvas Navigation For A Responsive Website


The varying viewports that our websites encounter on a daily basis continue to demand more from responsive design. Not only must we continue to tackle the issues of content choreography1 — the art of maintaining order and context throughout the chaotic ebb and flow of the Web browser — but we must also meet the expectations of users. They’re not sitting still.

With the likes of Firefox OS2 (Boot to Gecko), Chrome OS3 and now Ubuntu for phones4 — an OS that makes “Web apps” first-class citizens — delivering native app-like experiences on the Web may become a necessity if users begin to expect it. Many in our field have argued for a degree of separation between the Web and native platforms for both technical and philosophical reasons. They’re certainly wise to heed caution, but as consumer devices continue to blur the boundaries, it’s worth thinking about what we can learn from native app design.

A Demonstration Link

In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns5 that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.

With that in mind, let’s get building.

The Accessible Base Link

All good things begin with a solid foundation of semantic HTML and widely supported CSS. In theory, this baseline should function as a usable experience for all browsers that visit our website. (It might also be the final experience in less-capable browsers.)

As a starting point, I’ll use a technique very similar to Aaron Gustafson’s “Smart Mobile Navigation Without Hacks6.” It requires no JavaScript to function.

Responsive Off-Canvas Menu Demo 17
Step 1 of the responsive off-canvas menu. Short link:

  • View demo 19
    Be sure to view on a mobile or small screen, and take a while to inspect the code. Although our final design will be significantly different, starting simple is vital; retrofitting accessibility isn’t trivial.

The HTML body looks like this (I’ve stripped a few attributes for semantic clarity):

<header id="top" role="banner">
    <h1>Book Title</h1>
    <a href="#nav">Book navigation</a>
<nav id="nav" role="navigation">
        <li><a href="#">Chapter 1</a></li>
        <li><a href="#">Chapter 2</a></li>
        <li><a href="#">Chapter 3</a></li>
        <li><a href="#">Chapter 4</a></li>
        <li><a href="#">Chapter 5</a></li>
    <a href="#top">Return to content</a>
<article role="main">
    <!-- [main content here] -->

You could consider the HTML alone, with little to no styling, as being “breakpoint zero.” If it’s not logical at this stage, then accessibility will not improve.

Demo 1 Breakdown Link

  • Media queries are based on a viewport width of 45em (that’s content-dependent). Above this breakpoint, the navigation is permanently visible. I prefer em units because they allow breakpoints to maintain a relationship with text size. Lyza Gardner explains in detail in her post “The EMs Have It: Proportional Media Queries FTW!10
  • I’m using both min-width and max-width media queries to scope CSS. This adds a bit of complexity. Most people prefer a “mobile-first” build, using only progressively larger min-width queries. The downside with that technique is the amount of resetting required if an element has noticeably different visual states. Neither method is right or wrong.
  • The crux of this initial stage is the :target pseudo-class11 selector, utilized to show and hide the navigation. Only IE8 and lower lack support. However, this is a non-issue if you serve a semi-fluid desktop style sheet to old IEs. Jake Archibald12Nicolas Gallagher13 and Stuart Robson14 can tell you more.

As the demo takes shape, I’ll continue to introduce the main development principles. There’s a long way to go yet…

Going Off-Canvas Link

For some websites, the above may suffice — but not for us! We’re experimenting with off-canvas patterns and striving for that native experience. Because we cannot ignore older browsers, it’s now time to progressively enhance.

Responsive Off-Canvas Menu Demo 215
Step 2 of the responsive off-canvas menu. Short link:

  • View demo 217
    You will see the restyled navigation with basic functionality.

Demo 2 Breakdown Link

  • I’m adding the class js-ready to the document element after the DOMContentLoaded18 event fires. The selector .js-ready is used as a hook to safely restyle the navigation off-canvas. If for whatever reason JavaScript doesn’t load, then the original functionality from demo 1 still exists.
  • To show and hide the navigation, I’m toggling a class of js-nav on the document element when the user clicks (or taps) the relevant buttons. This simply applies a style of left: 70% to the #inner-wrap element (#outer-wrap is used to hide any overflow and to avoid scrollbars).

This is a fairly basic enhancement, but importantly it remains usable before JavaScript is ready. It’s also notable that no inline styles are written with JavaScript; only classes are used to manage states.

Jumping between open and closed navigation states makes for a jarring user experience. Users need to understand — or even see — how an interface has changed. This is often the point where developers let the Web down. To be fair, building user interfaces is incredibly difficult. What I’m going to show below is far from perfect, but it’s certainly a step in the right direction.

So, we have the set-up. Now let’s add transitions.

Transitioning (The Wrong Way) Link

I’ll start by getting it all wrong, because this is how I would have done it a few years ago, and learning from mistakes is important.

Responsive Off-Canvas Menu Demo 3 (jQuery)19
The responsive off-canvas menu using jQuery .animate for transitions. Short link:

jQuery21 is a resource that many front-end developers begin with to learn JavaScript. Personally, I am a big fan (never blame the tools), but unfortunately jQuery has a habit of making things look deceptively simple. It masks complexity and, with that, understanding.

Transitioning our off-canvas navigation with jQuery is very easy:

$('#nav-open-btn').on('click', function() {
    $('#inner-wrap').animate({ left: '70%' }, 500);

$('#nav-close-btn').on('click', function() {
    $('#inner-wrap').animate({ left: '0' }, 500);

Visually, this achieves the effect we’re after, but test it on mobile and watch the frame rate stutter. Performance is dreadful.

This method is bad for several reasons:

An animation of jQuery updating the DOM

  • jQuery’s .animate increments the element’s style attribute on every animation frame (as can be seen in the GIF above). This forces the browser to recalculate the layout22.
  • It leaves inline styles in the DOM that have very high specificity and that will override our well-maintained CSS. This is a big issue if the viewport is resized and triggers different breakpoints.
  • A separation of concerns is lost because styles are defined in JavaScript files.

Overall, it’s a performance and maintainability nightmare. There is a better way.

Transitioning With CSS Link

Putting the jQuery experiment aside, I’m now building from the second demo again, this time using CSS transforms and transitions. These enable us to smoothly animate the off-canvas navigation with great performance.

Responsive Off-Canvas Menu Demo 423
The final responsive off-canvas menu using CSS transforms and transitions. Short link:

  • View final demo25
    Performance has drastically improved compared to the jQuery example.

Final Demo Breakdown Link

  • Returning to CSS, I’m once again using the .js-nav class to toggle the navigation, while making no actual style alterations with JavaScript.
  • I’m progressively enhancing with the classes .csstransforms3d and .csstransitions (applied to the document element by Modernizr26).
  • Instead of moving the navigation with negative positioning (left: -100%), I’m using the transform property: transform: translate3d(-100%, 0, 0).
  • CSS transitions are used to animate transform changes: transition: transform 500ms ease. And I’ve added a few more transforms to enhance the visual effect.

With the help of Modernizr, this will fall back to demo 227 if browser support is lacking for CSS transforms and transitions. (In theory, I could fall back to jQuery animation, but it’s really not worth it.) When you download Modernizr28, you can include only the feature detection that you need. It also includes the HTML5 shiv for IE. All in all, it’s a very useful script.

The benefits here are immense. First and foremost, by transitioning elements with 3-D transforms, the browser can generate render layers that are hardware-accelerated29. Secondly, there’s no need for JavaScript to worry about style or media-query breakpoints. JavaScript need only interpret user interaction and apply classes to maintain states — CSS defines the visual changes.

We can look deeper into performance by using Chrome’s Developer Tools. The results below are from the desktop browser, but for mobile performance you could use USB Remote Debugging30 on Android devices.

jQuery Animation Performance Link

jQuery animation performance in Chrome Developer Tools31

The four events above represent the opening and closing of the navigation twice. In the diagram, yellow represents the JavaScript running, purple is the rendering (recalculating the style and layout), and green is the painting to the screen. On mobile, we’d be shooting way below that 30 FPS line. I also tested on an iPhone 3GS and could literally count 3 FPS with my own eyes — it’s that slow!

CSS Transition Performance Link

CSS transition performance in Chrome Developer Tools32

What a difference! The only JavaScript that exists is there to manage user interaction before and after the transition. The green we’re seeing is the minimum that the browser needs to repaint the transition at a respectable frame rate, using GPU acceleration33.

Possible Concerns Link

As with all new Web standards, nothing is inherently perfect.

In WebKit-based browsers, the font smoothing34 may switch to antialiased from the default subpixel-antialiased when CSS transforms or transitions are applied. This could result in visually thinner text, which many designers actually prefer — but not something you should “fix.”35

Flickering can also occur if an element goes between transform and no-transform. To avoid this, always start with a default like translate3d(0,0,0) on an element that will move later, so that the render layer is composed and ready.

The Next Step Link

Enhancing further, we could detect and take advantage of touch gestures, like swiping, to really bring this implementation closer to par with its native counterparts — “closer” being the operative word, but I do believe the gap is closer than many would have us believe.

It’s also — in my opinion — a gap that we need to bridge.

There are other clever ways to increase interaction speed. Mobile browsers tend to wait around 300 ms to fire click events. Google’s Ryan Fioravanti has a great article on “Creating Fast Buttons36” to reduce this latency.

Transition easing37 can radically change the visual effect and the user’s perception of what’s happening. Whether elements need to spring, bounce or accelerate into action, Lea Verou has a useful cubic bezier38 resource to generate custom easing functions.

Hopefully, this article has shown the improvements that can be made if we take extra care to understand the technology we’re using.

Download The Code Link

So, there we have it: a three-tiered responsive, interactive, off-canvas menu. I’ve set up a GitHub repository39 where you can view all the code. Have a play with it; there are a few bits and pieces I haven’t covered to avoid bloating this article.

Further Reading Link

To really understand why the techniques highlighted above are my preferred solution, I point you in the direction of these resources:


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

David Bushell is a website designer and front-end developer working at Browser Creative, London. He blogs regularly at and xheight, and shares inspiration and web design related interests at Design Heroes. You can also follow him on Twitter.

  1. 1

    Excellent thanks guys. I was just in the process of implementing an off screen animation and used jQuery.

  2. 2

    Michael Benin

    January 15, 2013 9:59 am

    Dropping in these two plugins should achieve what is accomplished in this article using CSS, and furthermore will utilize RAF.

    It would be interesting for you to run the same tests against JS/jQuery with these jQuery plugins.

    • 3

      David Bushell

      January 15, 2013 2:45 pm

      Hi again!

      I’ve wrote a very detailed response testing these two plugins.

      In the GitHub repo I’ve included demos for jQuery animate enhanced and jQuery requestAnimationFrame that you can test.

      Basically you can’t combine both plugins. The animate-enhanced plugin does improve performance similar to my demo. The jquery-requestAnimationFrame plugin isn’t going to do much good in this circumstance. Both add a lot of code weight and complexity.

      This was fun to test — thanks for the links!

    • 4

      Hi Michael,

      Thanks for the suggestion, it would definitely speed up the jQuery version. I’ll update the GitHub repo soon with another demo using these plugins. I’m not convinced they’ll be faster than my final implementation, but let’s see!

      Edit: demos below!

  3. 5

    A little extra detail which I think makes the experience better is adding a transparent anchor over the portion of the page that slides off screen. Using jQuery to set it’s height to 100% makes it so that if the user interacts with content on the off screen part like scrolling, buttons, forms etc it causes the off screen portion to slide back in.

    I hope that makes sense. Similar to how facebook wont let you scroll vertically or interact with the content when you’re using the off screen menu.

    • 6

      Hi Ethan,

      I understand what you mean. It should actually detect a click/tap event on the off-screen content and slide back in, no invisible anchor needed. Have you tested? If it doesn’t work let me know what device+browser combo you’re using :)

      I was tempted to implement swipe gestures but I didn’t want to make it overly complicated. Hammer.js is an awesome lightweight library that’ll do most of the hard work, for anyone wanting to experiment further.

      • 7

        I added hammer.js in and it works great. Do you have any solutions for how to keep the off screen menu visable? I have a site that’s fairly long and I’ve been exploring fixed position solutions to keep it visible. another level of complexity is that the side out menu is sometimes longer than the window. I tried a fixed 100% height div with overflow scroll but that starts to get weird after you scroll to the bottom and then try to go back up etc.

        • 8

          I’m actually trying to accomplish the same thing. Any new insights on this?

        • 9

          Hi Ethan

          Did you manage to rewrite the menu in Jquery not JS?

        • 10

          Ashley Briscoe

          November 12, 2013 3:24 am

          Hi Ethan,

          I have also implemented hammer.js but it is jumpy on IOS 6 and 7. But really smooth on Android. Have you had the same issue or is it the way I have implemented it.

      • 11

        I switched my project over to CSS so it’s smoother but is there a way to eliminate the jumping to the anchor? Using Return False; will stop the css from targeting.

      • 12


        Fantastic article, just what I have been looking for! I’m trying to build an epic template for bootstrap (will release to all when finished) with everything from responsive off canvas nav to cookie directive (for the EU people, annoying law but oh well). I have been trying to get the detect a click/tap to close the nav on an iphone/ipad (safari and chrome) to work but can’t for the life of me. My idea is to remove the close button completely to be more like the facebook app or mashables website. I don’t really think overlaying a div to act as a click is the correct way to do it. Was wondering what your thoughts are? You can check the process of the template at: if you are interested

  4. 13

    Have you considered using the off-canvas approach 100% of the time regardless of the size of the browser?

    This would provide for a less cluttered header and could almost turn every page into a landing page (where visible menu options are limited helping to guide action).

    Yet, given the prevelance of this menu style today – almost everyone would understand its purpose so it doesn’t hide options from those that want it.

    • 14

      That’s a bold idea!

      I’d like to see more chances taken like that. Perhaps for tech savvy people like us it would be intuitive. Certainly with apps it’s a common design people are use to. Are expectations of a website different?

    • 15

      Currently working on something like that. Still a way to go.

      • 16

        This is a fantastic example. I like how you’ve gone for the + sign, and the way that it’s one of two things on the landing page. My eyes were immediately drawn to it ……after checking out your logo for a a few seconds (NICE!). I also like the way it animates from the corner, it’s very effective, works great for photography designs. I do think you should incorporate the blog into that site. I read on concrete5’s website, their ethos is that blog is a verb not a noun! therefore its about delivering the information and including certain features with it. It doesn’t have to look like a “blog”. I suggest building this as a child theme for wordpress, or parent if you can be on with the hassle utilise the four corners for things like recent posts and archive links then have featured posts on a carousel with your theme it would look great.

  5. 17

    I don’t get it, are the pages supposed to change (transition) from off-canvas when you click on the menu (chapters) items? If so, the demos are not working, I was expecting to see a new page slide in.

    • 18

      I think the demo is only for showing the transitions speed (jquery compared with css). Switching the pages’ content isn’t focused. It’s depending on yourself.

      After reading your post a few times, I think I didn’t get your question, did I?
      Moving back the content area is shown by clicking the close button.

    • 19

      You need to resize your browser so it’s at a mobile dimension. Then the responsive layout changes and hides the menu buttons.

      The CSS implementation is very smooth. Well done.

    • 20

      Hi Ashenkase,

      The pages don’t transition, it’s only the navigation that transitions into view. If you’re viewing in a desktop browser make sure to resize it small enough to see (at wider breakpoints the navigation is always visible). Or better yet give it a test on a mobile phone :)

      • 21

        Joao Carvalhinho

        October 4, 2013 2:06 am

        He was talking about the content interaction (next step… or pressing a menu button)… This menu approach is very fine for an app that has the full content locally stored and the content view is “independent from the menu” (i.e. loads on the background)… but in a webpage if you have to re-load the contents after pressing a button what should happen ?

        e.g. when you press the chapter 3 button what should happen? The menu should close automagicaly? a new page should be loaded (reload the full page, thus wating for the contents to load)? the text should scroll to the anchor (meaning you would have to load all chapters at once? and then again… where can I acces the menu if I am in the half of the page? scroll up to go down?! (the first thought solution reminds me of the old “frames” approach from the 90’s :)

        The left/hamburguer menu approach is a good one, but for webpages it has lots and lots of caveats… because of loading times…or content dimension…

  6. 22

    I’ve never been much of a fan of RWD up until now, because, for more complicated (than a blog) sites, navigation has always been a stumbling point in my eyes. Your solution is quite frankly the best I have seen by a country mile.

    • 23

      David Bushell

      January 15, 2013 2:51 pm

      Thanks Dominic.

      It’s nothing too original so I can only take credit for researching and presenting a fairly solid implementation (I’m sure there are holes to find!). One problem that still remains is the breakpoint at which the off-canvas navigation becomes active. Without some nasty JavaScript the breakpoint can’t adjust for the number (and width) of menu items.

      • 24

        Regarding the Breakpoint issue; (eventually) can’t you use viewport units (vw, vmin, or vh) and/or em-based calculations (assuming em-based media queries)?

        I’ve tried to do Aaron Gustafson’s method which took a while to (I thought the omitted styles and markup, especially the header markup, were sort of necessary to truly understand what was going on), as well as Tim Pietrusky’s excellent “Responsive Menu Concept” article on CSS-Tricks covering how to do off-canvas-navigation as well (

        Overall, I didn’t find breakpoint issues come about using viewport units, and I don’t recall that being too much of an issue using em units (though I tried at most 10 list items)…

  7. 25

    One of the best Smashing articles lately!

    I was just trying to figure out some good solutions for mobile navigation, thanks!

  8. 26

    Hi David, this is by far the best article that I’ve read on Smashing Magazine in months. I must admit that it took me some time to get this working in my own app, but you definitely saved me hours finding this out by myself.

    Thanks a lot for the clear examples and article, it’s definitely a winner.

  9. 27

    Daniel Montgomery

    January 15, 2013 3:17 pm

    Very nice work here.

    All of these ideas are in a constant flow and it’s nice to see a good overview of the benefits and drawbacks of this menu approach. I’m going to have to revisit CSS transitions and see if I can’t use them more.

    It’s a bit depressing to see so much “should already have” features and then go back to developing for IE8 (and IE7).

  10. 28

    Alex James Bishop

    January 15, 2013 3:55 pm

    An excellent and well detailed article David. Performance and responsiveness are vital to a good user experience on mobile devices so it’s great to see the ‘on-page’ performance benchmarks.

    Loading times, use of bandwidth, and battery usage are also a major concern for user experience on mobile devices; I’d be interested to see how the stats for these benchmarks compare on the example vs a page with some custom written javascript as opposed to loading the whole jQuery library.

    When comparing pages I’ve seen using OCL vs native apps the one thing that always sticks out for me is that in native apps the menus scroll separately to the main content – often freezing the vertical position of the main content while allowing the off canvas portion to be scrollable, and I think behaviour like this is important to consider from a UX perspective.

    Again great article, and it’s good to see OCL get some more ‘mainstream’ spotlight, hopefully it means all the really talented folks out there will come up with some great things even a monkey like myself can use!

    • 29

      Regarding freezing the main content, this should be pretty trivial to add in (based on whether the js-nav class is present) – check out ( for a great example. They add position: fixed to the main content and give it a semi-transparent overlay (another nice touch to make it clear that you’re only able to interact with the nav).

  11. 30

    Hi David, thanks for the clear and interesting write-up!

    I have been looking at Zurb’s Foundation lately, they also offer this off canvas navigation. Can you tell me which one they use? The “wrong” way or the “right” way?


    • 31

      David Bushell

      January 16, 2013 3:56 am

      Hi Piet,

      I would never say there is a definitive “right” way. I mean, my jQuery example is definitely bad practice, but it terms of delivering the best experience there are several techniques to understand.

      I checked out the ZURB foundation off-canvas stuff. They get a lot right. They toggle classes and use CSS transitions. They’re transitioning negative margins and positions. That has decent performance but will be noticeably slow if the page has a heavy DOM. Using 3D transforms is by far the faster performance method — at least *today* (browsers improve all the time). See the “further reading” links at the end of my article for the technicalities of GPU acceleration.

  12. 32

    Beautiful navigation and a great article!

    However, there’s a minor annoyance what at least I get with with both desktop and mobile Safari. The header flashes slightly after animation is done. Luckily there’s a fix for this. If you set “-webkit-backface-visiblity” to “hidden” that should do it. Like this:

    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; -webkit-backface-visibility: hidden; }

  13. 33

    A great article, David. This is exactly the kind of quality that makes me want to come back to Smashing again and again.

    It’s really nice to see the author so involved in the comments too. Thanks for the great work.

    Back to the topic, I was also looking at implementing this sort of solution using jQuery despite my previous first hand experiences with it’s various inefficiencies with animation. It’s great to see your solution and exactly how it improves performance.

  14. 34

    Really good article!

    A demo for multi-level-navigation would have made it perfect.

    It would be nice, if anyone has an Idea, how to realize something like this (without JS):

  15. 35

    neil paterson

    January 16, 2013 2:17 pm

    i have downloaded this and will have a good long look. its something i have wanted to add to my site but have had now idea where to start.

  16. 36

    I’ve found an issue with this in any current webkit browser. If you have elements inside an element that has been translate3d’d from off canvas, to on-canvas, it won’t re-flow the contents of the translate3d’d element.

    This is likely a performance enhancement implemented by webkit, will post a fix as a reply.

  17. 38

    Marco Barbosa

    January 18, 2013 1:58 am

    Hey David,

    Very efficient demo.

    Though some would argue that you shouldn’t use #ids in the CSS :D

    I’d like to see this demo with vm and wm units.

    Thanks for sharing!

  18. 39

    Hi David, I think this is a great example of how you can start to bring in navigation patterns than have been applied by native apps. Last year I had a lengthy debate with a developer about this being really ‘hard’ to implement, you’ve shown it isn’t it just takes time to wrap your head around how you are structuring the content.

    It’s going to take me a while to reverse engineer your examples, something I am finding quite often when looking at examples that use media queries, I think this is a very elegant concept.

  19. 40

    Really good article and awesome demo ! Thanks for the share !

  20. 41

    This is a really good post. One of the hardest things to translate to a mobile screen is navigation – on our site we have this huge sprawling menu which obviously doesn’t scale down very well.

    We came up with a solution inspired by the slide-in style, but instead it slides down with a fade in sub menu. This allows to hide links that could be obtrusive at first glance from view, but keep them accessible at the same time.

  21. 42

    Abigail Sinclair

    January 19, 2013 1:21 am

    I’ve been scratching my head over how to handle navigation in a couple of websites I’m building and this has given me something great to work with, thanks!

    Will definitely be downloading this to play with later.

  22. 43

    How about handling two menus?
    I mean like #nav and #sub-nav.
    I have try but no idea how to do it.

  23. 44

    Brandon Brown

    January 21, 2013 4:38 pm

    I took this concept and added a few of my own things to it, leaving attribution to the author :)

  24. 45

    I just don’t get it.
    I tested the final demo on my PC (on the latest versions of IE, Safari, Chrome and Firefox) and on my HTC Wildfire as well … and nowhere did I see a transition on menu closing/opening.
    Did I miss something or what?

  25. 46

    This is a really good article. Thx for sharing!

  26. 47

    I just wanted to let you know that this inspired me to make a template of sorts for this type of website. I went about it in my own way, and came up with this:

  27. 49

    Dilawer Pirzada

    January 24, 2013 9:01 pm

    What the heck, the demos URLs are not working in Google Chrome Browser…

  28. 50

    I noticed that in IE9 (10 is fine), the menu will open and close correctly, but only once. Clicking on the nav button after that, nothing happens

    I can’t figure out the problem, but it’s think it’s due to the fact that after the initial open/close the nav_open variable is never being set to false – I guess it’s a quick fix, any ideas?

  29. 51

    Great article, wonderfully informative.

    I was playing around with it, and was going to use it in a project of mine that requires a responsive nav. However, I noticed that it’s not fixed, and with a larger menu it’s not as user friendly to utilize.

  30. 52

    I just realized the reason the position fixed does not work is because transform resets position: fixed.

  31. 53

    Konstantin Baev

    February 6, 2013 11:49 am

    I’ve found 2 broken links in the “FURTHER READING” part of the article.
    Malte Ubl’s article is
    Paul Lewis’a article
    instead of broken links

    Fix it, please

  32. 54

    Excellent article David. My first attempt at this, I indeed did it using JS and it worked but was very choppy, this approach is a delight. Thank you for this article.

  33. 55

    This is great, but i still cannot find examples or figure out how to make this close the side menu when a link is clicked. So for example, you open the side menu, there are 5 links in the menu, you click one and then it should close the menu and load the new page, or even just load the new page with the menu closed. The other problem i am seeing, if you simply load a new page with this, the top left “nav” button is no longer functional. ….Any ideas?

  34. 56

    Great overview of advantages of using CSS vs JS, with maintainability & performances comparison.

    A few months ago I created the same effect by using the “checkbox” trick as explained here : (a no-javascript solution)

    You can take a look at my try on JSfiddle :

  35. 57

    Hi all,
    The CSS approach does seem very appealing, however in IE (whatever the version) it bugs. the hidden menu overlaps the page during the transition… Darn IE but so many people still use IE…

  36. 58

    Benjamin David

    February 24, 2013 7:33 am

    If like me you are experiencing a blinking issue on webkit when clicking on the menu button, you can find a fix here :

  37. 59


    I’ve got a little problem. When using page anchors, the header seems to disappear.

    Have a look here –
    Click on “Treasure Island” which will take you down the page.

    I have tried everything. It seems it’s got something to do with this section below and the attached JavaScript function:


    Can someone please help???

    • 60

      I have the same issue, calling a page anchor using the offset menu causes the entire page to move up, almost completely hiding the navbar.
      Did you figure out a way around it?

      • 61

        Same issue here. Anybody find a solution?

        • 62

          This is caused by overflow: hidden on #outer-wrap. Removing it fixes the problem but allows you to scroll to the right when the menu is open.

          Here’s a fix that worked for me. Apply overflow:hidden only when the menu is open.
          #outer-wrap {
          position: relative;
          width: 100%;

          .js-nav #outer-wrap {
          overflow: hidden;

  38. 63

    About Transitioning (The Wrong Way).

    I have an alternative way, it is fast too and it works if the “-webkit-transition” is not available. (with no animation):
    css .ease-left{-webkit-transition: left 0.5s ease;} //css animation
    js to open left block: $(‘.side-out’).css(‘left’, ‘240px’); // not js-animation
    <div class=”side-out ease-left” style=”left: 0px;”>
    <div class=”side-in”>
    <div class=”side-item side-left-out”>
    <div class=”side-item side-main-out”>

    (for compatibility use also transition, -moz-transition, -ms-transition, -o-transition)

  39. 64

    First of all great writeup and nice research, I just hope this is still alive enough for a quick response. I’ve been scratching my head for two days, I don’t understand js all too well I’ll be honest, but personally I don’t see why it is needed at all. You say here it’s used as an event handler and listens for activity. Surely with pure CSS3 you can click a button and a menu can come from the left. I know it’s got to be possible.

    The next thing that gets me is do I need to worry about IE if I am only intending on this being a feature on mobile phones???? I don’t think it matters if older browsers like IE don’t support the CSS3 option because realistically they shouldn’t be looking at the mobile menu. Am I right of have I missed something major?

  40. 65

    Burkhard Rosemann

    April 9, 2013 3:19 am

    What would it look like on the right side? I’m trying to add a sidebar to the right (off canvas) in addition to the menu left.

    • 66

      Hi Burkhard,

      i am trying too to implement a additional right slide area. Did you get some response or figured it out?

      Unfortunately i am stuck :-(

      Best regards,


      I think the problem is that the following definitions do not differ between left and right area:

      .csstransforms3d.csstransitions.js-ready #inner-wrap {…}

      .csstransforms3d.csstransitions.js-nav #inner-wrap {…}

    • 67

      Here’s an adjustment to make #nav load and fly-out from the right.

      1. Reposition the open/close buttons
      Change the positioning of the .nav-btn to align right in the top nav. I use .nav-btn to open and close the nav and have deleted all references to .close-btn.

      .nav-btn {
      position: relative;
      top: 1em;
      right: 1em;
      text-align: right;
      color: #fff;

      2. Reposition #nav and edit values for #nav and #inner-wrap animation

      The edits below are made inside @media screen and (max-width: 45em).

      .js-ready #nav {
      height: 100%;
      /* no change, note width is equal to distance moved on x-axis */
      width: 70%;
      background: #333333;
      /* CHANGE h-shadow to positive value */
      box-shadow: inset 1.5em 0 1.5em 1em rgba(0, 0, 0, 0.25);
      .js-ready #nav {
      /* CHANGE: loads #nav right of window */
      .js-ready #inner-wrap {
      /* no change, loads #inner-wrap flush left */
      .js-nav #inner-wrap {
      /* CHANGE: position #inner-wrap -70% on x-axis, left of window */

      /* transforms below changed to 2d values,
      vendor prefixes removed for example only */

      .csstransforms3d.csstransitions.js-ready #nav {
      /* CHANGE x-axis to positive value,
      sets to far right-edge of frame */
      transform: translate(100%, 0);
      backface-visibility: hidden;
      .csstransforms3d.csstransitions.js-ready #inner-wrap {
      left: 0 !important;
      transform: translate(0, 0);
      transition: transform 500ms ease;
      backface-visibility: hidden;
      .csstransforms3d.csstransitions.js-nav #inner-wrap {
      /* CHANGE x-axis to negative value,
      animates #inner-wrap to move to left */
      transform: translate(-70%, 0);

      /* Remove these styles if you do not want the nav to scale when it opens
      .csstransforms3d.csstransitions.js-ready #nav .block
      .csstransforms3d.csstransitions.js-nav #nav .block

      • 68

        Sharath kumar

        January 27, 2015 3:43 pm

        Hi Emily,

        I was looking for the nav to load from the right, thanks for this solution, but the close button still appears on left of the slide and the menu icon right of the slide.

        One more issue is the slide over laps onto the webpage on the right.


↑ Back to top