THE PENDING DRAFT

Since mobile devices are booming, screen real estate is becoming more of an issue again. One very effective solution is to move things like navigation menus out of the visible canvas and back in when used.

I have yet to get my head around possible techniques, so i compiled a little reading list with some recommendable tutorials, examples and resources.

The most comprehensive article on this list is from David Bushell for Smashing Magazine. If you only read one article about this topic, make it this one! He covers the whole process of building a fully responsive Off-Canvas Menu, which also works without Javascript. Furthermore, he gives us some great insights into performance issues when using jQuery and why he recommends using CSS Transitions instead.
Smashing Magazine – Implementing Off-Canvas Navigation For A Responsive Website

Luke Wroblewski, author of the Mobile First book, was maybe one of the first to mention Off-Canvas Navigation. In this artictle he covers many different concepts and ideas for Multi Device Layouts including the Off-Canvas approach.
Multi Device Layout Patterns

Inspired from Luke Wroblewski, Jason Weaver developed a very nice demo page for an Off-Canvas Menu. You can also find this Demo on github to fork it and play around with it.
Off Canvas – A Multi-Device Web Layout Pattern
Off Canvas Demo by Jason Weaver on github

A german article with some very good examples of Off-Canvas Menus in practice. Worth checking out, even if you don’t speak german. They’re also using this technique heavily in their own Tatami Theme.
Elmastudio – Showcase: Off Canvas in responsive Webdesigns (German)

Another one in german with a nice overview of the technique and the idea behind it.
Elmastudio – Off Canvas-Layouts in responsive Webdesigns

I know, a list like this can never be complete, so please share your thoughts and suggestions in the comments below.