I’ve recently been working on a project that required an off-canvas navigation menu. This type of navigation is frequently used in smartphone & tablet apps, such as Facebook, Foursquare and YouTube.

While building my off-canvas navigation menu I stumbled upon Medium’s excellent implementation, the animation was smooth on desktop & mobile devices and the experience felt very snappy.

I determined that my off-canvas navigation menu must have:

  • Smooth menu movement using hardware acceleration.
  • Smooth transitions using CSS3.
  • Clicking on a menu link must close the menu.
  • The menu MUST close when you click anywhere on the site.
  • No horizontal scrollbars when menu is open.
  • IE 7 support (sigh).
  • Use jQuery
  • Responsive

I’ve open sourced this project and named it Pushy because it pushes your content (to the right) when the menu is open. Pushy uses CSS transforms & transitions on modern browsers and a jQuery animation fallback for IE 7-9. The only two dependencies Pushy requires is jQuery & Modernizr.

You can download this project on Github and free to let me know if you use Pushy in one of your websites.

To give a better idea of how Pushy works, check out this live demo.