GitHub icon LinkedIn icon
Javascript

Pushy – Off-Canvas Navigation

Chris

• 1 min read

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

  1. 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?

  2. This menu is amazing! I have used it a couple times, and now I was wondering if it can open from the right side? Thanks!

  3. 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?

  5. 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 🙂

  6. 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

  7. 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

  8. 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???

  9. 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!

  10. Nevermind Christopher, I found the class that I needed to remove from the script:

    “.pushy-right a”

  11. This is working fine with Bootstrap 4.1.2, thanks for this. I have one thing I’d like to see available that I can’t figure out how to do for the life of me. Granted, when a page link is clicked the user is sent to the corresponding page and if he clicks outside of the sidebar menu the current page is overlay “free.” Is there a way to get the menu-ban to stick to the top of the page or move it to the top of the sidebar which is stuck to the top? Just a thought.

Comments are closed.