christophery/pushy

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.

pushy's Issues

Can't see navigation styling in desktop browser

As the title says, I don't see any styling on the side navigation (.pushy .pushy-left) on my desktop browser (it just appears as blank). However, on my phone I can see the styling. This is what I'm seeing on the demo too, at http://www.christopheryee.ca/pushy/.

It doesn't seem to be a media query hiding it because when I resize my browser to a mobile size this still happens.

Is this default behavior? Can I change it? Makes development on a desktop browser hard.
Thanks.

Overflow-x: hidden; causes the dreaded div that covers right scrollbar when used with fixed nav bar

When adding a positioned fixed nav bar inside the container. The overflow-x: hidden; on html and body cause the dreaded div covering the right scrollbar.

Is there a way to fire multiple Pushy sections?

Love the plugin and using it on a new site for the nav but was wondering if there's a way to add another off canvas element for a contact form and have that slide in on click separate from the navigation?

Scroll inertia

I honestly find the lack of scrolling momentum and inertia very unnatural to the user if you're visiting a majority of sites which have this, then get to one with Pushy. I've tried adding it to the -webkit-overflow-scrolling: touch; to the html, body declaration but it seems to cause the .pushy nav to stall then jump to position around when scrolling. I'm seeing this in Chrome and Safari on iOS7. Does anyone have a fix for this? By the way, this is regarding the site content, not the nav content.

Request: Collapsible subnav

Would like to see a built in option to make sub nav collapsible. Thank you!

Do not work without modernizr even on Chrome

Do not work on my computer without modernizr even on Chrome.

This is not normal

Is it possible to trigger the open and close behaviors

I would like to call the open and close functions from outside the script, would that be possible?

IE9 subnav issue

Thanks for writing such a clean, amazing set of code! I'm having some issues in IE9 where the menu closes when clicking on the parent of a submenu. The submenu is open when I go back and click on the menu but it closes the second I click on it's parent. Here's the page I'm working on: http://echocanyonraft.wpengine.com/

I know Modernizer used to be required. Could this be an issue that still needs it?

error compiling with sass

Hi, I found an error on pushy.css if used as pushy.scss. It generate an error around row 110, just before the @-o-keyframes fade selector. I just erased the @-ms-keyframes (as far as I know it ms-keyframes doesn't exists) and the compiler error is gone.

Thank you, regards

Make Overlay black with opacity

Hi, this is not really a issue but a way i want to share to make the overlay black with opacity.

Since i didn't like the face that at first a see a black overlay appear to fast befor the pushy animation was finished i added a way to make the overlay fade.

.pushy-active .site-overlay{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px;
    z-index: 9999;

    -webkit-animation: fade 1s; /* Safari and Chrome */
       -moz-animation: fade 1s; /* Firefox */
        -ms-animation: fade 1s; /* Internet Explorer */
         -o-animation: fade 1s; /* Opera */
            animation: fade 1s;
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Android issue

The menu is not working properly on Android. It shows up by default on page load where it is supposed to be hidden. Is there a fix for it?

Screenshot of demo site on android:

Breaks when using browser back + next

Hey,

Great little plugin. I've got a small issue, though. After navigating using the browser back and next buttons, the menu button isn't responding. I need to refresh the page to make things work again.

I've added a class of .push to menu-btn as I want the button to move with the menu; this is what seems to have broken things, but i can't see why?

Any ideas?

Switch position pushy menu

Great plugin! One question, how can I switch from a left menu to the right menu. So it toggles out of the right?

Thnkx!

Not working in IE11

I've recently upgraded to Windows 8.1. And obviously it came with IE 11 or Edge. Pushy's off canvas menu transition isn't functioning at all.

Callbacks on opening and closing pushy

Is there any callback when pushy is opened and closed?
I want to add some styles to <html> and <body> elements when pushy is opened and remove them when closed.

Close not working

Is there something that I need to do to ensure that clicking outside the menu closes the menu? It doesn't seem to be working. I'm using bootstrap also if that makes any difference.

Modernizr feature detection

Hi, it is a great work you did there. I have a question, since Modernizr is one of the dependencies, what Modernizr's feature detection does Pushy need? Because as mentioned in Modernizr documentation, use only features detection we need for production.

HTML element for triple bars is broken in some browsers

The example HTML code uses ☰ to display the triple bars (mobile icon) to open the pushy menu. Unfortunately, this HTML code does not always work. For example, it is broken on WinXP with Chrome and Opera.

If you look at the sites listed as using pushy, you'll see how most of them have stopped using this HTML code and instead use font symbols (like font-awesome).

It may be worth investing some time to find a better replacement that works on all/most platforms.

Menu visible by default

From how I understand it, the pushy menu is visible by default (on non-3d transform browsers) until the javascript is loaded and it's hidden. It would be better to include some class in the css that assigns display:none that is removed once the javascript is loaded properly. This would prevent the menu from showing up on non-javascript, or blocked javascript, browsers. I've got a solution working, but I wanted to see if you're interested before I submit a PR.

Visible menu when at desktop size

This is exactly what I'm after, however would it be possible to have the menu visible whilst at full desktop size? Then once you start to scale down the browser size (tablets/mobile) the menu disappears and the menu button appears like it is at current?

I'm sure I could hack this together with Bootstrap or something, but I'd like to stay away from something like that.

Any solutions?

Adding a fixed nav breaks the left menu in IE 11

Adding a fixed nav bar inside the container div will break the pushy slide out menu in IE11.

Causing fixed position menu visibility issue

I had an issue with my fixed position menu disappearing after installing pushy. Here's the fix:

If you have a fixed position menu and it's disappearing, remove the -webkit-perspective: 1000; from the .pushy, #container, .push {} css rule

Could this support jQuery 1.8.x or even 1.5.x?

Is there a specific reason why pushy requires jQuery 1.11? The latest jQuery 1.x release is 1.10.2. Would pushy still be able to run with jQuery 1.8.x or even 1.5.x?

Don't display menu until JS has loaded

Hi there! I love Pushy, it's a fantastic solution, thank you for sharing it and I really hope you keep developing it further. I was wondering if there is any way I can attach a display:none; class to stop the menu flashing up on page load before it is hidden, then change this to a class of display:block; when the page has loaded?

Currently giving the nav an id to display:none; and when .pushy-active is passed to display: block;, this works but loses css transitions (nav pops up/disappears instantly when trigger button is clicked).

Nav flashes up on IE8+9 (in browserstack) but not so prevalent on other browsers. Curiously, this issue happens in downloadable demo version of Pushy but not your live demo here http://www.christopheryee.ca/pushy/. Thanks for any info!

Webkit-perspective shuts off position:fixed in chrome

When adding a position:fixed nav bar inside the container div the webkit-perspective will shut it off.

Breaks html5 video on Chrome on Android

When using pushy. HTML5 videos on Android play, but the controls disappear when they're in full screen. I've narrowed it down to pushy.

When I remove pushy, everything works fine.

If pushy is active, then the control bar for the video appears somewhere in the middle of the screen (if at all) but touching that does nothing. Interacting with it still occurs at the bottom of the screen (where there's nothing visible)

No design choices

Perhaps it would be better if the stylesheet doesn't style anything other than the necessary off-canvas stuff and a default width?

Menu Length Issues

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

Disable close menu on link click

How can I make it so when a link in my menu is clicked, pushy does not slide away? I'm adding an accordion sub menu system, and the parent menu items are a tags by default in WordPress. So when I click it to open my accordion, pushy closes.

How can I edit the push js file to remove this functionality?

I figure, when you click a link in the menu, the page is going to reload anyway in most cases, so I don't need it to auto close the pushy menu.

Thanks.

Kindle Fire support

Pushy fails on Kindle Fire. It's possible that the failure extends to other browsers that use your jQuery fallback code; not sure about that.

Why? KF does not have support for 3d transforms, but is not properly ignoring the 3d properties. The menu opens properly, but nothing in the slideout panel is clickable, as if the panel is somehow still considered off-screen.

I have a simple solution! I apologize for the fact that it's not a full code push, as I am frantically working on a specific use-case for pushy, and won't have the time to test the code-base properly. But nevertheless, here's the solution:

The 3d transform properties need to be added ONLY inside your test for 3d transforms. So in your demo, this means:

(1) Removing the class "pushy-left" from the HTML code on the

element
(2) Removing "pushy-left" from the declaration of "pushyClass" in the javascript (line 12)
(3) Adding this line just inside the test "if Modernizer.csstransforms3d":
pushy.addClass('pushy-left')

My limited testing proves this to work properly on modern browsers (Chrome 31, eg) and on KF.

You may want to clean up this solution before deploying. E.g., add a new JS variable for what class to apply, making it easier to switch to "pushy-right" for instance.

Demo v0.9.2 not working

Haven't looked into it much, but the demo in the master zip does not do anything. Clicking on the menu button does nothing. Console error says: ReferenceError: $ is not defined.

Double Menus

I would love to be able to have menus sliding in from both sides or to be able to choose the direction the menu comes in from. Great plugin other than that.

Visible when zooming-in

The menu (that should be in hidden state) comes into view briefly when zooming-in the browser. The transition of the transformation is the source of the issue but I couldn't find a solution yet.

Percentage widths

Hey! any of you managed to use this nice menu with percentage widths?

Menu not hidden on older Android phones

Here is a screenshot from browserstack of what it looks like:

The menu is out and will not close

Browser/Device Compatibility

I'm noticing that this does not work in older Android devices like the Galaxy Tab and S2, for instance. I know, I know, upgrade, dammit! Haha. I agree. However, if that is not an option, can someone perhaps point me in the direction of getting this to work on these devices?

I'm pretty sure it has to do with translate3d not being supported.

Thank for any and all assistance.

can you add RTL support

can you add support for a right side off-canvas nacigation?

How to add No Conflict compatibility?

If I want to add the script to a Wordpress theme, is the required change just to wrap the whole thing in jQuery((function($) {};?

'var' keyword missing for the cssTransforms3d variable

Possibility in removing the modernizr dependency?

I know quite a few sites use modernizr however for my current project its unneeded. I ended up implementing this fantastic gist modified var names a bit and just bound the result to cssTransforms3d within pushy.js. Considered doing a pull request but was unsure on how it might be taken. Anyway just a consideration, in total it ends up adding around 449 bytes (min'd), which in turn lets us remove the 16k modernizr dependency (or 9k if you just use the css 3d tranforms build option).

Here is what I ended up adding to pushy.js right after menuWidth

    cssTransforms3d = (function csstransforms3d(){ // checks if 3d transforms are supported removing the modernizr dependency
            var el = document.createElement('p'),
            supported = false,
            transforms = {
                'webkitTransform':'-webkit-transform',
                'OTransform':'-o-transform',
                'msTransform':'-ms-transform',
                'MozTransform':'-moz-transform',
                'transform':'transform'
            };

            // Add it to the body to get the computed style
            document.body.insertBefore(el, null);

            for(var t in transforms){
                if( el.style[t] !== undefined ){
                    el.style[t] = 'translate3d(1px,1px,1px)';
                    supported = window.getComputedStyle(el).getPropertyValue(transforms[t]);
                }
            }

            document.body.removeChild(el);

            return (supported !== undefined && supported.length > 0 && supported !== "none");
        })();

And you just replace Modernizr.csstransforms3d in the condition with cssTransforms3d instead.

Trigger Problem when scrolled down before

if you scroll down the site a bit and then back up to the trigger menu and click on the trigger, the menu does not open. there is another clicking required. I testet it on Android 4.4.

Menu not showing when using jQuery Fallbacks

If I make my browser (Chrome) use the jQuery fallbacks, instead of CSS transitions, the menu doesn't appear when the content slides to the right.

I fixed this by changing this line from this:

pushy.animate({left: "0px"}, menuSpeed);

to this:

pushy.animate({left: menuWidth}, menuSpeed);

I'm not sure why that works - I thought 0px would be fine - but it seems to.

External link not work

Hello,

It is possible to add a external link in the menu ?

Left and Right off-canvas

It would be great to have Left and Right off-canvas
Like Facebook

Fixed menu at top?

Can you add this feature? On mobile scrolling long content the menu icon is gone and you have to scroll a loooooong way up to access the menu agian.

thanks

Compatibility Issue with Sticky.js?

I'm using sticky.js to fix my header to the top of the window at all times, which seems to be working fine. Then I added pushy.js to add the off-canvas menu function, and it seemed at first to be working as well.

If you're at the very top of the page (before sticky.js kicks in) and you click the .menu-btn - the whole page (header included) slides over, and the nav menu fills in that space (using pushy.js). However, if you scroll down the page (after sticky.js has forced the header to remain visible) and click the .menu-btn - the header shoots right back to the top of the page (as if sticky.js is being disabled). If you close the menu, the site slides back over and the sticky-header appear suddenly (which really makes for a laggy experience).

There are no stylesheets for the Sticky.js plugin and I haven't changed anything from the original Pushy.js stylesheet, so I looked to see if there was anything contradicting it in my CSS, but I couldn't seem to find the issue:

.header {
    border-top: 1em solid #69c7c8;
    background-color: #fff;
    padding: 2em 0;
    width: 100%;
    position: absolute;
    z-index: 999999;
}

Have you ever worked with sticky.js before while using this plugin?

Mobile Safari Back Button Caching

Hi.

I noticed an issue with Pushy and iOS Safari. If you open a link from the pushy menu in the same window then return to the previous page, the menu remains open. Unfortunately, to close it, you need to click the menu button to activate the site overlay then click the site overlay. It's pretty annoying. I'm not sure if this is a good fix for everybody, but I found a fix on Stack Overflow.

// for jQuery
$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {window.location.reload();}
});

// for regular JS
window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

Note: this won't break the back button functionality.

Thanks,
Steve

Doesn't hide in IE9

The sidebar doesn't hide properly in IE9 but in IE7 and 8.

Any idea about this?

Enhancement: Add 'swipe' functionality

Great little plugin, does the job nicely. Just a suggestion really - it would be great if you could also 'swipe' the off canvas panel open or closed.

Hovering over images on page with Pushy causes another scrollbar to popup?

In Chrome (Only tested on mac)..

*make sure the page content overflows so you see a scrollbar
*Add an image to the bottom of that page, make sure you can't see it when you scroll back to the top of the page,
*Make the image something like 500px high (doesnt matter what height it is just the effect is more obvious the higher it is).
*Hover mouse over image and you get an extra scrollbar?!?!?!
*Start scrolling down and you get extra space on the bottom of the scrollable div?!?

.. I think this is a chrome bug and not something in Pushy, what do you think?