Pure CSS transition effects for off-canvas views

You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required.

Demo Download v1.0.2 Documentation

Try it out!

Choose position:

Choose effect:

Or you can:

Try out the new multiple drawers

Features

Pure Drawer comes with a lot of nice features

  • Cool Effects

    Choose between 14 different effects

  • Drawer Position

    Choose where you want your drawer to appear

  • Responsive Design

    Pure Drawer comes with three premade breakpoints. Create different drawer layouts for small, medium and large screens. And choose whether or not to use pure-drawer at all at specific breakpoints.

  • Cross browser support

    Pure Drawer works in all modern browsers. Gracefully degrades in IE9.

  • Multiple Drawers

    Need more then one drawer? Pure drawer can have up to three different drawers.

  • No javascript

    Pure Drawer is a 100% css solution. But feel free to enhance the functionality further with some awesome javascript code.

View Documentation