From e48a3e706bcc15e91a6e0e0e61dc565d3ae2717d Mon Sep 17 00:00:00 2001 From: Natasha Kaweski Date: Wed, 9 Nov 2016 15:29:42 -0200 Subject: [PATCH 1/5] Closes when page scrolls and doesn't closes when click inside --- js/jPushMenu.js | 178 ++++++++++++++++++++++++++---------------------- 1 file changed, 95 insertions(+), 83 deletions(-) diff --git a/js/jPushMenu.js b/js/jPushMenu.js index ea1df7b..64ce8ff 100644 --- a/js/jPushMenu.js +++ b/js/jPushMenu.js @@ -7,88 +7,100 @@ */ (function($) { - $.fn.jPushMenu = function(customOptions) { - var o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions); - - $('body').addClass(o.pushBodyClass); - - // Add class to toggler - $(this).addClass('jPushMenuBtn'); - - $(this).click(function(e) { - e.stopPropagation(); - - var target = '', - push_direction = ''; - - // Determine menu and push direction - if ($(this).is('.' + o.showLeftClass)) { - target = '.cbp-spmenu-left'; - push_direction = 'toright'; - } - else if ($(this).is('.' + o.showRightClass)) { - target = '.cbp-spmenu-right'; - push_direction = 'toleft'; - } - else if ($(this).is('.' + o.showTopClass)) { - target = '.cbp-spmenu-top'; - } - else if ($(this).is('.' + o.showBottomClass)) { - target = '.cbp-spmenu-bottom'; - } - - if (target == '') { - return; - } - - $(this).toggleClass(o.activeClass); - $(target).toggleClass(o.menuOpenClass); - - if ($(this).is('.' + o.pushBodyClass) && push_direction != '') { - $('body').toggleClass(o.pushBodyClass + '-' + push_direction); - } - - // Disable all other buttons - $('.jPushMenuBtn').not($(this)).toggleClass('disabled'); - - return; - }); - - var jPushMenu = { - close: function (o) { - $('.jPushMenuBtn,body,.cbp-spmenu') - .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright'); - } - } - - // Close menu on clicking outside menu - if (o.closeOnClickOutside) { - $(document).click(function() { - jPushMenu.close(o); - }); - } - - // Close menu on clicking menu link - if (o.closeOnClickLink) { - $('.cbp-spmenu a').on('click',function() { - jPushMenu.close(o); - }); - } - }; + $.fn.jPushMenu = function(customOptions) { + var o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions); + + $('body').addClass(o.pushBodyClass); + + // Add class to toggler + $(this).addClass('jPushMenuBtn'); + + $(this).click(function(e) { + e.stopPropagation(); + + var target = '', + push_direction = ''; + + // Determine menu and push direction + if ($(this).is('.' + o.showLeftClass)) { + target = '.cbp-spmenu-left'; + push_direction = 'toright'; + } + else if ($(this).is('.' + o.showRightClass)) { + target = '.cbp-spmenu-right'; + push_direction = 'toleft'; + } + else if ($(this).is('.' + o.showTopClass)) { + target = '.cbp-spmenu-top'; + } + else if ($(this).is('.' + o.showBottomClass)) { + target = '.cbp-spmenu-bottom'; + } + + if (target == '') { + return; + } + + $(this).toggleClass(o.activeClass); + $(target).toggleClass(o.menuOpenClass); + + if ($(this).is('.' + o.pushBodyClass) && push_direction != '') { + $('body').toggleClass(o.pushBodyClass + '-' + push_direction); + } + + // Disable all other buttons + $('.jPushMenuBtn').not($(this)).toggleClass('disabled'); + + return; + }); + + var jPushMenu = { + close: function (o) { + $('.jPushMenuBtn,body,.cbp-spmenu') + .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright'); + } + } + + // Don't close menu on clicking inside it + $('.cbp-spmenu').click(function(e) { + e.stopImmediatePropagation(); + }); + + // Closes when page scrolls + if (o.closeOnClickOutside) { + $(document).scroll(function() { + jPushMenu.close(o); + }); + } + + // Close menu on clicking outside menu + if (o.closeOnClickOutside) { + $(document).click(function() { + jPushMenu.close(o); + }); + } + + // Close menu on clicking menu link + if (o.closeOnClickLink) { + $('.cbp-spmenu a').on('click',function() { + jPushMenu.close(o); + }); + } + }; /* - * In case you want to customize class name, - * do not directly edit here, use function parameter when call jPushMenu. - */ - $.fn.jPushMenu.defaultOptions = { - pushBodyClass : 'push-body', - showLeftClass : 'menu-left', - showRightClass : 'menu-right', - showTopClass : 'menu-top', - showBottomClass : 'menu-bottom', - activeClass : 'menu-active', - menuOpenClass : 'menu-open', - closeOnClickOutside: true, - closeOnClickLink : true - }; -})(jQuery); + * In case you want to customize class name, + * do not directly edit here, use function parameter when call jPushMenu. + */ + $.fn.jPushMenu.defaultOptions = { + pushBodyClass : 'push-body', + showLeftClass : 'menu-left', + showRightClass : 'menu-right', + showTopClass : 'menu-top', + showBottomClass : 'menu-bottom', + activeClass : 'menu-active', + menuOpenClass : 'menu-open', + closeOnClickOutside: true, + closeOnClickLink : true + }; +})(jQuery); \ No newline at end of file From 109a91cefcd6cb1d9e9d24b92bf86f902a781eea Mon Sep 17 00:00:00 2001 From: Natasha Kaweski Date: Wed, 9 Nov 2016 15:32:47 -0200 Subject: [PATCH 2/5] Closes when page scrolls and doesn't closes when click inside --- js/jPushMenu.js | 192 ++++++++++++++++++++++++------------------------ 1 file changed, 96 insertions(+), 96 deletions(-) diff --git a/js/jPushMenu.js b/js/jPushMenu.js index 64ce8ff..2b4a441 100644 --- a/js/jPushMenu.js +++ b/js/jPushMenu.js @@ -1,106 +1,106 @@ /*! * jPushMenu.js - * 1.1.1 + * 1.2.0 * @author: takien * http://takien.com * Original version (pure JS) is created by Mary Lou http://tympanus.net/ */ (function($) { - $.fn.jPushMenu = function(customOptions) { - var o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions); - - $('body').addClass(o.pushBodyClass); - - // Add class to toggler - $(this).addClass('jPushMenuBtn'); - - $(this).click(function(e) { - e.stopPropagation(); - - var target = '', - push_direction = ''; - - // Determine menu and push direction - if ($(this).is('.' + o.showLeftClass)) { - target = '.cbp-spmenu-left'; - push_direction = 'toright'; - } - else if ($(this).is('.' + o.showRightClass)) { - target = '.cbp-spmenu-right'; - push_direction = 'toleft'; - } - else if ($(this).is('.' + o.showTopClass)) { - target = '.cbp-spmenu-top'; - } - else if ($(this).is('.' + o.showBottomClass)) { - target = '.cbp-spmenu-bottom'; - } - - if (target == '') { - return; - } - - $(this).toggleClass(o.activeClass); - $(target).toggleClass(o.menuOpenClass); - - if ($(this).is('.' + o.pushBodyClass) && push_direction != '') { - $('body').toggleClass(o.pushBodyClass + '-' + push_direction); - } - - // Disable all other buttons - $('.jPushMenuBtn').not($(this)).toggleClass('disabled'); - - return; - }); - - var jPushMenu = { - close: function (o) { - $('.jPushMenuBtn,body,.cbp-spmenu') - .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright'); - } - } - - // Don't close menu on clicking inside it - $('.cbp-spmenu').click(function(e) { - e.stopImmediatePropagation(); - }); - - // Closes when page scrolls - if (o.closeOnClickOutside) { - $(document).scroll(function() { - jPushMenu.close(o); - }); - } - - // Close menu on clicking outside menu - if (o.closeOnClickOutside) { - $(document).click(function() { - jPushMenu.close(o); - }); - } - - // Close menu on clicking menu link - if (o.closeOnClickLink) { - $('.cbp-spmenu a').on('click',function() { - jPushMenu.close(o); - }); - } - }; + $.fn.jPushMenu = function(customOptions) { + var o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions); + + $('body').addClass(o.pushBodyClass); + + // Add class to toggler + $(this).addClass('jPushMenuBtn'); + + $(this).click(function(e) { + e.stopPropagation(); + + var target = '', + push_direction = ''; + + // Determine menu and push direction + if ($(this).is('.' + o.showLeftClass)) { + target = '.cbp-spmenu-left'; + push_direction = 'toright'; + } + else if ($(this).is('.' + o.showRightClass)) { + target = '.cbp-spmenu-right'; + push_direction = 'toleft'; + } + else if ($(this).is('.' + o.showTopClass)) { + target = '.cbp-spmenu-top'; + } + else if ($(this).is('.' + o.showBottomClass)) { + target = '.cbp-spmenu-bottom'; + } + + if (target == '') { + return; + } + + $(this).toggleClass(o.activeClass); + $(target).toggleClass(o.menuOpenClass); + + if ($(this).is('.' + o.pushBodyClass) && push_direction != '') { + $('body').toggleClass(o.pushBodyClass + '-' + push_direction); + } + + // Disable all other buttons + $('.jPushMenuBtn').not($(this)).toggleClass('disabled'); + + return; + }); + + var jPushMenu = { + close: function (o) { + $('.jPushMenuBtn,body,.cbp-spmenu') + .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright'); + } + } + + // Don't close menu on clicking inside it + $('.cbp-spmenu').click(function(e) { + e.stopImmediatePropagation(); + }); + + // Closes when page scrolls + if (o.closeOnClickOutside) { + $(document).scroll(function() { + jPushMenu.close(o); + }); + } + + // Close menu on clicking outside menu + if (o.closeOnClickOutside) { + $(document).click(function() { + jPushMenu.close(o); + }); + } + + // Close menu on clicking menu link + if (o.closeOnClickLink) { + $('.cbp-spmenu a').on('click',function() { + jPushMenu.close(o); + }); + } + }; /* - * In case you want to customize class name, - * do not directly edit here, use function parameter when call jPushMenu. - */ - $.fn.jPushMenu.defaultOptions = { - pushBodyClass : 'push-body', - showLeftClass : 'menu-left', - showRightClass : 'menu-right', - showTopClass : 'menu-top', - showBottomClass : 'menu-bottom', - activeClass : 'menu-active', - menuOpenClass : 'menu-open', - closeOnClickOutside: true, - closeOnClickLink : true - }; -})(jQuery); \ No newline at end of file + * In case you want to customize class name, + * do not directly edit here, use function parameter when call jPushMenu. + */ + $.fn.jPushMenu.defaultOptions = { + pushBodyClass : 'push-body', + showLeftClass : 'menu-left', + showRightClass : 'menu-right', + showTopClass : 'menu-top', + showBottomClass : 'menu-bottom', + activeClass : 'menu-active', + menuOpenClass : 'menu-open', + closeOnClickOutside: true, + closeOnClickLink : true + }; +})(jQuery); From 2b5a9f817c00e951580895d218dd06a85bfcb403 Mon Sep 17 00:00:00 2001 From: Natasha Kaweski Date: Thu, 10 Nov 2016 10:57:55 -0200 Subject: [PATCH 3/5] Now it also have push-menu to bottom from top --- index.html | 4 ++++ js/jPushMenu.js | 10 +++++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 2afcb96..eea8d26 100644 --- a/index.html +++ b/index.html @@ -96,6 +96,8 @@

jPushMenu Demo

+ +

Changelog

@@ -133,6 +135,8 @@

Make button or link

+ + diff --git a/js/jPushMenu.js b/js/jPushMenu.js index 2b4a441..d2a18d2 100644 --- a/js/jPushMenu.js +++ b/js/jPushMenu.js @@ -1,6 +1,6 @@ /*! * jPushMenu.js - * 1.2.0 + * 1.2.1 * @author: takien * http://takien.com * Original version (pure JS) is created by Mary Lou http://tympanus.net/ @@ -32,6 +32,7 @@ } else if ($(this).is('.' + o.showTopClass)) { target = '.cbp-spmenu-top'; + push_direction = 'tobottom'; } else if ($(this).is('.' + o.showBottomClass)) { target = '.cbp-spmenu-bottom'; @@ -44,6 +45,9 @@ $(this).toggleClass(o.activeClass); $(target).toggleClass(o.menuOpenClass); + // Add the same height to the animation of push-menu to bottom + $('.' + o.showTopClass).css('top', $(target).height()); + if ($(this).is('.' + o.pushBodyClass) && push_direction != '') { $('body').toggleClass(o.pushBodyClass + '-' + push_direction); } @@ -57,7 +61,7 @@ var jPushMenu = { close: function (o) { $('.jPushMenuBtn,body,.cbp-spmenu') - .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright'); + .removeClass('disabled ' + o.activeClass + ' ' + o.menuOpenClass + ' ' + o.pushBodyClass + '-toleft ' + o.pushBodyClass + '-toright ' + o.pushBodyClass + '-tobottom'); } } @@ -88,7 +92,7 @@ } }; - /* + /* * In case you want to customize class name, * do not directly edit here, use function parameter when call jPushMenu. */ From a00f08633ef7c58038104937b1f67a9d5622f715 Mon Sep 17 00:00:00 2001 From: Natasha Kaweski Date: Thu, 10 Nov 2016 11:07:23 -0200 Subject: [PATCH 4/5] It doesn't move the button anymore, just the menu :) --- js/jPushMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jPushMenu.js b/js/jPushMenu.js index d2a18d2..8fe782a 100644 --- a/js/jPushMenu.js +++ b/js/jPushMenu.js @@ -46,7 +46,7 @@ $(target).toggleClass(o.menuOpenClass); // Add the same height to the animation of push-menu to bottom - $('.' + o.showTopClass).css('top', $(target).height()); + $(o.pushBodyClass + '-' + push_direction).css('top', $(target).height()); if ($(this).is('.' + o.pushBodyClass) && push_direction != '') { $('body').toggleClass(o.pushBodyClass + '-' + push_direction); From 4a570fd4aad28b22ed3fadfce45e70e27f8036f6 Mon Sep 17 00:00:00 2001 From: Natasha Kaweski Date: Thu, 10 Nov 2016 11:11:26 -0200 Subject: [PATCH 5/5] Animation of body works fine with attribute top declared --- css/jPushMenu.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/jPushMenu.css b/css/jPushMenu.css index 79ae624..25ccb5b 100644 --- a/css/jPushMenu.css +++ b/css/jPushMenu.css @@ -104,6 +104,7 @@ overflow-x: hidden; position: relative; left: 0; + top: 0; } .push-body-toright {