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.
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.
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