Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow Multiple Pushy Menus with Different Buttons #141

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Allow Multiple Pushy Menus with Different Buttons #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3815dc
Multiple Pushy Menus with Different Buttons
Oxibug Jun 19, 2022
3e08d4c
Multiple Pushy Menus with Different Buttons
Oxibug Jun 19, 2022
8e37d6d
Multiple Pushy Menus with Different Buttons
Oxibug Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 67 additions & 4 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<header class="site-header push">This is a header</header>

<!-- Pushy Menu -->
<nav class="pushy pushy-left" data-focus="#first-link">
<nav class="pushy pushy-left pushy-for-button-one" data-focus="#first-link">
<div class="pushy-content">
<ul>
<li class="pushy-submenu">
Expand Down Expand Up @@ -76,14 +76,77 @@
</div>
</nav>

<nav class="pushy pushy-right pushy-for-button-two" data-focus="#second-link">
<div class="pushy-content">
<ul>
<li class="pushy-submenu">
<button id="second-link">Submenu 1</button>
<ul>
<li class="pushy-submenu">
<button>Sub-Submenu 1</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
</ul>
</li>
<li class="pushy-submenu">
<button>Sub-Submenu 2</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
</ul>
</li>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
</ul>
</li>
<li class="pushy-submenu">
<button>Submenu 2</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
<li class="pushy-link"><a href="#">Item 3</a></li>
</ul>
</li>
<li class="pushy-submenu">
<button>Submenu 3</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
<li class="pushy-link"><a href="#">Item 3</a></li>
</ul>
</li>
<li class="pushy-submenu">
<button>Submenu 4</button>
<ul>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
<li class="pushy-link"><a href="#">Item 3</a></li>
</ul>
</li>
<li class="pushy-link"><a href="#">Item 1</a></li>
<li class="pushy-link"><a href="#">Item 2</a></li>
<li class="pushy-link"><a href="#">Item 3</a></li>
<li class="pushy-link"><a href="#">Item 4</a></li>
</ul>
</div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<!-- Two Different Trigger buttons Example -->
<div id="container">
<!-- Menu Button -->
<button class="menu-btn">&#9776; Menu</button>
<div class="wrp-pushy-trigger" data-pushy-target=".pushy-for-button-one" data-pushy-body-class="pushy-sidemenu-one another-class-one">
<button class="menu-btn">&#9776; Menu 1</button>
</div>

<div class="wrp-pushy-trigger" data-pushy-target=".pushy-for-button-two" data-pushy-body-class="pushy-sidemenu-two another-class-two">
<a href="#" class="menu-btn">&#9776; Menu 2</a>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra neque a diam cursus pulvinar. Suspendisse faucibus mi id accumsan lobortis. Pellentesque consectetur varius turpis, nec viverra justo pellentesque sit amet. Vestibulum convallis leo non purus vehicula, non faucibus libero rhoncus. Morbi aliquam tincidunt facilisis. Aenean sodales nulla ac semper consectetur. Vivamus commodo massa convallis justo posuere vestibulum. Aenean congue non mauris ac auctor. Ut suscipit et eros nec suscipit. Nulla congue, mauris nec bibendum sagittis, urna orci tincidunt massa, in vulputate velit nulla vitae nunc. Etiam urna justo, imperdiet nec orci sollicitudin, tempus feugiat erat. Vivamus id lectus nulla. Vestibulum sagittis cursus metus vel ultricies. <a href="https://github.com/christophery/pushy">Suspendisse viverra</a> interdum metus eu placerat. Quisque tristique velit nisi, scelerisque consectetur tortor vehicula ut. Donec id fermentum mi, nec venenatis felis.</p>

<p>Praesent id metus imperdiet, congue leo sed, eleifend purus. Donec congue scelerisque tempus. Maecenas eget nunc pharetra, laoreet enim sed, dictum odio. Sed non mollis purus. Aliquam aliquet, risus eget dictum commodo, neque mi dapibus ipsum, tempus iaculis elit lorem pharetra mauris. Vivamus pulvinar scelerisque lectus a congue. Sed vitae odio massa. Pellentesque condimentum sit amet arcu in convallis.</p>
Expand All @@ -101,7 +164,7 @@
<footer class="site-footer push">This is a footer</footer>

<!-- Pushy JS -->
<script src="js/pushy.min.js"></script>
<script src="js/pushy.js"></script>

</body>
</html>
118 changes: 84 additions & 34 deletions js/pushy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,53 @@
(function ($) {
var pushy = $('.pushy'), //menu css class
body = $('body'),
containerSelector = '#container',
menuBtnWrapperSelector = '.wrp-pushy-trigger',
menuBtnWrapper = $(menuBtnWrapperSelector),
menuBtnSelector = '.menu-btn', //set default menu button CSS class
menuBtn = menuBtnWrapper.find(menuBtnSelector),
menuBtnFocus = menuBtnWrapper.find(menuBtnSelector),
push = $('.push'), //css class to add pushy capability
pushyLeft = 'pushy-left', //css class for left menu position
pushyOpenLeft = 'pushy-open-left', //css class when menu is open (left position)
pushyOpenRight = 'pushy-open-right', //css class when menu is open (right position)
siteOverlay = $('.site-overlay'), //site overlay
menuLinkFocus = $(pushy.data('focus')), //focus on link when menu is open
menuLinkFocus = $(pushy.attr('data-focus')), //focus on link when menu is open
menuSpeed = 200, //jQuery fallback menu speed
menuWidth = pushy.width() + 'px', //jQuery fallback menu width
submenuClass = '.pushy-submenu',
submenuOpenClass = 'pushy-submenu-open',
submenuClosedClass = 'pushy-submenu-closed';
submenuClosedClass = 'pushy-submenu-closed',
lastButtonPressed = null,
devBodyClass = '';

//check if menu-btn-selector data attribute exists
if( typeof pushy.data('menu-btn-selector') !== 'undefined' ){
var menuBtnClass = pushy.data('menu-btn-selector'); //take user defined menu button CSS class
}else{
var menuBtnClass = '.menu-btn'; //set default menu button CSS class
}

//css classes to toggle the menu
var menuBtn = $(menuBtnClass + ', .pushy-link');

//css class to focus when menu is closed w/ esc key
var menuBtnFocus = $(menuBtnClass);

// check if container-selector data attribute exists
var containerSelector = '#container';
if (typeof pushy.data('container-selector') !== 'undefined') {
containerSelector = pushy.data('container-selector');
if (typeof pushy.attr('data-container-selector') !== 'undefined') {
containerSelector = pushy.attr('data-container-selector');
}
var container = $(containerSelector);

// Get User Custom Body Classes
function getDevBodyClasses(currentButton){
var btnParent = currentButton.closest(menuBtnWrapperSelector);

if( typeof btnParent.attr('data-pushy-body-class') !== 'undefined' ) {
devBodyClass = btnParent.attr('data-pushy-body-class');
}

}

// Get Pushy Menu Target for the current button pressed
function getPushyMenuTarget(currentButton) {
var btnParent = currentButton.closest(menuBtnWrapperSelector);

if( typeof btnParent.attr('data-pushy-target') !== 'undefined' ) {
pushy = $(btnParent.attr('data-pushy-target'));
}
}


//close menu w/ esc key
$(document).on('keyup', function(e) {
//check if esc key is pressed
Expand All @@ -46,9 +61,9 @@
//check if menu is open
if( body.hasClass(pushyOpenLeft) || body.hasClass(pushyOpenRight) ){
if(cssTransforms3d){
closePushy(); //close pushy
closePushy(lastButtonPressed); //close pushy
}else{
closePushyFallback();
closePushyFallback(lastButtonPressed);
opened = false; //set menu state
}

Expand All @@ -62,13 +77,21 @@
}
});

function togglePushy(){
function togglePushy(currentButton){

getPushyMenuTarget(currentButton);
getDevBodyClasses(currentButton);

//add class to body based on menu position
if( pushy.hasClass(pushyLeft) ){
if( pushy.hasClass(pushyLeft) ) {
body.toggleClass(pushyOpenLeft);

}else{
body.toggleClass(pushyOpenRight);

}
pushy.toggleClass('active');
body.toggleClass(devBodyClass);

//focus on link in menu after css transition ends
if(menuLinkFocus){
Expand All @@ -79,15 +102,26 @@

}

function closePushy(){
function closePushy(currentButton){

getPushyMenuTarget(currentButton);
getDevBodyClasses(currentButton);

if( pushy.hasClass(pushyLeft) ){
body.removeClass(pushyOpenLeft);
}else{
body.removeClass(pushyOpenRight);
}

pushy.removeClass('active');
body.removeClass(devBodyClass);
}

function openPushyFallback(){
function openPushyFallback(currentButton) {

getPushyMenuTarget(currentButton);
getDevBodyClasses(currentButton);

//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.addClass(pushyOpenLeft);
Expand All @@ -102,13 +136,20 @@
push.animate({right: menuWidth}, menuSpeed);
}

pushy.addClass('active');
body.addClass(devBodyClass);

//focus on link in menu
if(menuLinkFocus){
menuLinkFocus.trigger('focus');
}
}

function closePushyFallback(){
function closePushyFallback(currentButton){

getPushyMenuTarget(currentButton);
getDevBodyClasses(currentButton);

//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.removeClass(pushyOpenLeft);
Expand All @@ -122,6 +163,9 @@
container.animate({right: "0px"}, menuSpeed);
push.animate({right: "0px"}, menuSpeed);
}

pushy.removeClass('active');
body.removeClass(devBodyClass);
}

function toggleSubmenu(){
Expand Down Expand Up @@ -181,12 +225,15 @@
toggleSubmenu();

//toggle menu
menuBtn.on('click', function(){
togglePushy();
menuBtn.on('click', function(e){
e.preventDefault();
lastButtonPressed = $(this);

togglePushy(lastButtonPressed);
});
//close menu when clicking site overlay
siteOverlay.on('click', function(){
togglePushy();
siteOverlay.on('click', function() {
togglePushy(lastButtonPressed);
});
}else{
//add css class to body
Expand All @@ -209,25 +256,28 @@
toggleSubmenu();

//toggle menu
menuBtn.on('click', function(){
menuBtn.on('click', function(e) {
e.preventDefault();
lastButtonPressed = $(this);

if (opened) {
closePushyFallback();
closePushyFallback(lastButtonPressed);
opened = false;
} else {
openPushyFallback();
openPushyFallback(lastButtonPressed);
opened = true;
}
});

//close menu when clicking site overlay
siteOverlay.on('click', function(){
if (opened) {
closePushyFallback();
closePushyFallback(lastButtonPressed);
opened = false;
} else {
openPushyFallback();
openPushyFallback(lastButtonPressed);
opened = true;
}
});
}
}(jQuery));
}(jQuery));