īasic demo showing how to easily implement an Off Canvas Menu by scotch.io.
The highlighted lines are the important stuff. Below is it all together with some extra markup for the demo. The demo I’m doing also uses Bootstrap 3 (for speeding things up) and Font Awesome (for aesthetics), but neither is required for the tutorial. The last necessary element that we need to add is an a tag to toggle the event of opening and closing the nav. Later, we’ll position absolute the menu to appear outside of the canvas container.
The reason we do this is that we want the menu to slide when we move the canvas (again, which basically holds everything). We’re actually going to put the menu inside of #site-canvas despite that it appears outside of the element. From the blueprint above, it might be a little deceiving. Īnother piece that we need to add is the #site-menu. The canvas part is what slides left and right and holds all the content of the page. The next thing we’re going to need to do add is our #site-canvas wrapper inside of our #site-wrapper. The site wrapper will be used to hide overflowed elements without messing up the scroll.
So, the first thing we’re going to do is build a #site-wrapper div that wraps everything just after the body tag. For this example, we’ll be assuming this is a full-window Off-Canvas Menu. The HTMLįrom the blueprint above, let’s build out the HTML. See the Pen OVPbKq by Chris Sevilleja ( on CodePen. A name that would make more sense would be Off Viewport Menus.Īnyways, here’s the terminology broken down for the tutorial and a blueprint of how to make Off-Canvas Menus: This has absolutely nothing to do with that. Although I think this is confusing because I feel that namespace is already reserved for HTML5 Canvas. Otherwise, you’ll have to use Chrome if you follow the steps step-by-step to get it working.įor the purpose of this article and keeping naming convention consistent amongst already existing resources, we’ll continue to use the term Canvas. Note: This example doesn’t completely cover cross-browser support and is only meant to be the simplest bare-boned example possible. 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. 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. Some other resources and demos:Īs with anything programming-related, there are multiple ways or methods to the same solution. This has the obvious and similar benefit of dropdowns menus with a lot more flair. They live outside of the viewport and are only shown when a certain event occurs (which is usually a click toggling the menu). 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”. Instead of JavaScript, we’ll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize. 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. Off-Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users.