Is there a way to fire multiple Pushy sections?

[boballanjones]

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?

[christophery]

It's not possible at the moment. Pushy was developed with only one menu in mind. You are always welcome to fork this repo and add this feature yourself.

[ricky-wong]

I was able to get this working with a few tweaks. I consolidated some code into a closePushy() function. Whenever you click the site overlay, we shouldn't be toggling, but rather, just closing Pushy. This helps keep us from toggling one thing when we're trying to close the other thing.

Then, to set things up, make Pushy accept parameters for a Pushy element and a trigger element. You can have multiple triggers on a page, each toggling a Pushy element, while only one Pushy menu is ever open at a time.

Here's a simple example with one button triggering one Pushy menu, and another button triggering a separate Pushy menu: http://jsfiddle.net/3otdLcLL/

Diff dump for the lazy:

$ diff -u -w pushy.js pushy-revised.js 
--- pushy.js    2015-09-16 18:10:45.000000000 -0700
+++ pushy-revised.js    2015-09-16 18:10:22.000000000 -0700
@@ -3,36 +3,46 @@
 * https://github.com/christophery/pushy/
 * by Christopher Yee */

+var pushy = function(menu, trigger) {
+    
 $(function() {
-   var pushy = $('.pushy'), //menu css class
+  var pushy = $(menu), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
-       pushyClass = "pushy-left pushy-open", //menu position & menu open class
+//    pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
-       menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
+    menuBtn = $(trigger), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width

    function togglePushy(){
        body.toggleClass(pushyActiveClass); //toggle site overlay
-       pushy.toggleClass(pushyClass);
+    pushy.toggleClass("pushy-left pushy-open");
        container.toggleClass(containerClass);
        push.toggleClass(pushClass); //css class to add pushy capability
    }

    function openPushyFallback(){
        body.addClass(pushyActiveClass);
-       pushy.animate({left: "0px"}, menuSpeed);
+    pushy.animate({left: menuWidth}, menuSpeed);
        container.animate({left: menuWidth}, menuSpeed);
        push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
    }

-   function closePushyFallback(){
+    function closePushy() {
        body.removeClass(pushyActiveClass);
+        pushy.addClass('pushy-left');
+        pushy.removeClass('pushy-open');
+        container.removeClass(containerClass);
+        push.removeClass(pushClass); //css class to add pushy capability
+    }
+
+  function closePushyFallback(){
+    closePushy();
        pushy.animate({left: "-" + menuWidth}, menuSpeed);
        container.animate({left: "0px"}, menuSpeed);
        push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
@@ -72,7 +82,7 @@
        });
        //close menu when clicking site overlay
        siteOverlay.click(function(){ 
-           togglePushy();
+      closePushy();
        });
    }else{
        //jQuery fallback
@@ -95,13 +105,13 @@

        //close menu when clicking site overlay
        siteOverlay.click(function(){ 
-           if (state) {
-               openPushyFallback();
-               state = false;
-           } else {
                closePushyFallback();
                state = true;
-           }
        });
    }
 });
\ No newline at end of file
+    
+};
+
+pushy('#menu1', '#menu-btn-1');
+pushy('#menu2', '#menu-btn-2');

Pull request to come soon™

[ricky-wong]

Actually, pull request not to come soon; I am not sure of the recommended way to invoke Pushy with specific elements. (This just came out of me sprinting towards getting it working for a push.)

If we went that route (function arguments), we could just provide defaults for menu and trigger if left undefined, so that stuff would keep working for people. That would be the easy way.

I think the "right" way would be to do something like $('#menu1').pushy({trigger: '#menu-btn-1'});, but I'm not sure.

If we start supporting selectors for menu and trigger, we should also support direct jQuery objects as well, in case the caller already has them selected, we don't have to select it again.

For example:
Instead of pushy('#menu1', '#menu-btn-1'); and running jQuery selectors, if they happened to be selected already, the caller could just pass them:

$menu1 = $('#menu1');
$menuBtn1 = $('#menu-btn-1');
pushy($menu1, $menuBtn1);

and avoid another selection.

[SilenceMMMMMM]

I use @rwong48 method.
there is something wrong when I used.

[GeorgeWL]

Seems to work for the method of both same side, but if one tries to have a pushy-left for one and pushy-right for the other, it opens both navs on the same side.

Any idea there? @rwong48 @christophery ?