Off Canvas Navigation - Demo 1

Using CSS3 Transforms & Transitions

The Demos

Demo 1: Slide from Top.
Demo 2: Slide From Right.
Demo 3: Slide From Right with a different box pattern.

All three off canvas navigation menus are responsive. Try it by clicking the menu button above in the nav bar and also by using different devices.
You're more than welcome to use the demo's in your own projects. Over time, I will add more demos as I get to grips with css3 transforms and transitions.

The HTML and Jquery are both pretty simple and are used in all three examples. The only difference can be seen in the CSS files due to different off canvas positions, transforms and transitions.

You may need to adjust the font sizes due to differences in font-families.
Go back to the tutorial for a step by step guide or download the files below.