Pushy – Off-Canvas Navigation

Pushy - Off-Canvas Navigation
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.

Comments

  • I absolutely love this menu, however, I am experiencing the following issues when the length of the menu is longer than the page:

    1. I am unable to scroll down to view the rest of the menu on the desktop and mobile. It would be great if there are 2 separate vertical scrollbars, one for the menu and the other for the page content.
    2. When I resize the length of the browser while the menu is open, the menu’s background color disappears.

    Any recommendations on how to resolve these issues?

  • I was wondering the same thing as Nichole, I’ve been fiddling about with the css but am not having any luck because I don’t really know what I’m doing. Can you help?

  • Hello Christopher, this is a life saver menu. But I need to make it visible on the left for desktop resolutions, say bigger than 1024px width screens. I tried to do this using css media queries but couldn’t…

    Any help?

    Thank you very much 🙂

  • I want a vertical scroll on the page and not for menu. I am trying to give a overflow-y: scroll in html tag but it is not working… Can you suggest me a solution

  • hi guys i am using pushy for mobile devices its nice but i have a problem i want to open & close it using touch, is there any way to do this please help me

    Thanks

  • Hi Christopher,

    Great menu, I am trying to implement it on my site. I am having troubles with external links though i.e: social icons. The link doesn’t re-direct to the external page, it just closes the menu. Am I missing something here???

  • Fantastic menu – going to be using it on my next project. One thing I’d like to alter is when a menu item is clicked the menu closes – I’d prefer that it stay open while loading the next page. Is there an easy edit to accomplish this?

    Thanks!

Leave a Reply