• Home
  • About
  • Contact
Off Canvas Menus with CSS3
Web Design May 3, 2014 by arlindgren@hotmail.com

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

Share Twitter Facebook Linkedin Pinterest
PreviousUnderstanding Vector Shapes in Illustrator
NextHow to Predict Web Design Trends

Add your Comment

You must be logged in to post a comment.

Download CV

I am a senior integrated designer with over 15 years professional design studio and freelance experience.
Download

Archives

  • July 2017 (8)
  • June 2017 (4)
  • September 2014 (1)
  • May 2014 (3)
  • April 2014 (7)

Recent Posts

  • Why Riffel Product Branding Works
  • Why Visitors Respond to Quality Content
  • Designing A Successful Checkout Process
  • How Fashion Websites Get it Right
  • How to Select a Design Agency: 10 Steps

Search

 

Categories

  • Business
  • Creative
  • Creativity
  • News
  • Web Design

Recent Post

Why Riffel Product Branding Works
Why Riffel Product Branding Works
19th Jul 2017
Why Visitors Respond to Quality Content
Why Visitors Respond to Quality Content
19th Jul 2017
Designing A Successful Checkout Process
Designing A Successful Checkout Process
19th Jul 2017
How Fashion Websites Get it Right
How Fashion Websites Get it Right
19th Jul 2017

Archives

Popular Tags

Beauty Best Design Effort Fashion Investment Tech Technology
I pride myself on my ability to face challenges head-on and not afraid to be straightforward with my opinions.
Address

The Hive Enterprise Centre, Southend, SS2 6EX

Email

adlindgren@gmail.com

© 2022 Design Attitude. All rights reserved.