Comments (5)
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.
from pushy.
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β’
from pushy.
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.
from pushy.
I use @rwong48 method.
there is something wrong when I used.
from pushy.
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 ?
from pushy.
Related Issues (20)
- Pushy in NPM packages. HOT 2
- Menu don't work with vue js 2 HOT 1
- iOS Mobile Container Scrolling Bug
- Third level submenu HOT 1
- Menu transitions on page load HOT 2
- Can width be set to 100% HOT 2
- Can I have a left menu and right menu? HOT 1
- Rearrange menu items for desktop HOT 3
- Fit Pushy for container width. HOT 1
- How can we stop the container scroll going to top, while we are opening Pushy-Menu HOT 1
- sidebar incompatible with jquery 3.1.1 HOT 1
- BS4 Dropdown Class for On-Canvas Multi-Line Menu HOT 1
- Change menu-btn class HOT 6
- Error don't appear the pushy menu HOT 1
- Desktop: Close '.pushy ul ul ' when clicking away from element
- Menu shows when loading page HOT 1
- Mobile Site Menu is not loading properly HOT 2
- Save a network request by encoding the arrow svg in the css instead of externally linking it HOT 1
- How to focus on a li tag within a submenu? HOT 3
- Multiple Pushy in one page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pushy.