Off Canvas Menus with CSS3
Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users.
This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we’ll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.
What the heck are Off Canvas Menus anyways? I’m not really sure where this name or terminology originated, but if you haven’t heard of it before, they’re basically your mobile “side menus”. They live outside of the viewport and are only shown when a certain event occurs (which is usually a click toggling the menu). This has the obvious and similar benefit of dropdowns menus with a lot more flair.
Getting Started
As with anything programming related, there are multiple ways or methods to the same solution. The solution that I’m going to show you is one that I like to use because it’s simple, extremely obvious to use, and will leave the door wide-open for you to improve and tweak. You’ll find after following these steps that you’ll be able to get much more creative with it than where the tutorial goes using only CSS.
Alright, now that the rectangle tool is selected with the M key, you have two options for drawing a rectangle.
How it works
For the purpose of this article and keeping naming convention consistent amongst already existing resources, we’ll continue to use the term Canvas. Although I think this is confusing because I feel that namespace is already reserved for HTML5 Canvas. This has absolutely nothing to do with that. A name that would make more sense would be Off Viewport Menus.
Full Article Scotch
