🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.9 Cool EffectsDifferent Drawer PositionResponsive DesignCross browser supportMultiple Drawers on single pageNo javascript

CSS Menus Responsive

Documentation

Pure Drawer

Version: 1.0.2

Pure Drawer is a 100% css solution for off-canvas drawers.

Download

https://github.com/mac81/pure-drawer/tree/master/src

Demo

http://mac81.github.io/pure-drawer/

Documentation

http://mac81.github.io/pure-drawer/documentation

Planned features

  • Multiple drawers (Implemented in version 0.8)
  • Javascript enhanced version
  • More effects (Implemented in version 1.0)

Changelog

1.0.2 :: 27th Jul 2015

  • Fixed scrollbar placement when drawer is on the right side.

1.0.1 :: 9th Dec 2014

  • Fixed issue with toggle button in Safari and IOS.

1.0 :: 28th Nov 2014

  • Added 5 new effects
  • New toggle icon
  • Added animation variables to scss settings
  • Minor bugfixes and refactoring.

0.9 :: 23th Sep 2014

  • Fixed issues with effect 5 and 7
  • New feature: You can now turn pure-drawer on/off on spesific breakpoints.

0.8 :: 17th Sep 2014

  • Total rewrite of css
  • Added support for multiple drawers

0.7 :: 6th Aug 2014

  • Fixed issue where window pusher jumped to top when drawer is active.
  • Rearranged fallback code
  • Adjustments to scss settings

0.6 :: 4th Aug 2014

  • Added breakpoint support. Drawers can now have different width and height for small, medium and large screens.

You May Also Like