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
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.
To give a better idea of how Pushy works, check out this live demo.