From 56b8440cc4089fe8cb3d2fb78802e0c7741ae31d Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 15:36:05 -0500 Subject: [PATCH 01/48] changed default grunt task --- Gruntfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index a1ab38e..87e9be4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -38,6 +38,6 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-concat'); // Default task(s). - grunt.registerTask('default', ['concat', 'uglify']); + grunt.registerTask('default', ['watch']); }; \ No newline at end of file From dcdfaea1e33f70e8daf9b6aee91c04cfdff9e720 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 15:38:03 -0500 Subject: [PATCH 02/48] added var to cssTransforms3d variable --- js/pushy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/pushy.js b/js/pushy.js index fb6a0f3..d0fc812 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -39,7 +39,7 @@ $(function() { } //checks if 3d transforms are supported removing the modernizr dependency - cssTransforms3d = (function csstransforms3d(){ + var cssTransforms3d = (function csstransforms3d(){ var el = document.createElement('p'), supported = false, transforms = { From c6bbde78cca03b2ea6aa430f28207a1c3730fc1a Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 15:43:38 -0500 Subject: [PATCH 03/48] changed click event listener --- js/pushy.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index d0fc812..c69486d 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -67,11 +67,11 @@ $(function() { if(cssTransforms3d){ //toggle menu - menuBtn.click(function() { + menuBtn.on('click', function(){ togglePushy(); }); //close menu when clicking site overlay - siteOverlay.click(function(){ + siteOverlay.on('click', function(){ togglePushy(); }); }else{ @@ -83,7 +83,7 @@ $(function() { var state = true; //toggle menu - menuBtn.click(function() { + menuBtn.on('click', function(){ if (state) { openPushyFallback(); state = false; @@ -94,7 +94,7 @@ $(function() { }); //close menu when clicking site overlay - siteOverlay.click(function(){ + siteOverlay.on('click', function(){ if (state) { openPushyFallback(); state = false; From 7397de8229c5aeb0b2154f06edd568fffcd4e851 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 15:54:03 -0500 Subject: [PATCH 04/48] added sub menu --- Gruntfile.js | 2 +- css/pushy.css | 47 ++++++++++++++++++++++++++++++++++++++++++----- demo.html | 25 +++++++++++++++++++------ img/arrow.svg | 8 ++++++++ js/pushy.js | 27 +++++++++++++++++++++------ js/pushy.min.js | 2 +- 6 files changed, 92 insertions(+), 19 deletions(-) create mode 100644 img/arrow.svg diff --git a/Gruntfile.js b/Gruntfile.js index 87e9be4..a1ab38e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -38,6 +38,6 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-concat'); // Default task(s). - grunt.registerTask('default', ['watch']); + grunt.registerTask('default', ['concat', 'uglify']); }; \ No newline at end of file diff --git a/css/pushy.css b/css/pushy.css index 53813f8..546f0ef 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -111,10 +111,47 @@ 100% { opacity: 1; } } -/* Example Media Query */ +/* Submenu */ -@media screen and (max-width: 768px){ - .pushy{ - font-size: 1.0em; - } +.pushy-submenu ul{ + display: none; + padding-left: 15px; +} + +/* Submenu Icon */ + +.pushy-submenu > a { + position: relative; +} + +.pushy-submenu > a::after { + content: ''; + display: block; + height: 11px; + width: 8px; + position: absolute; + top: 50%; + bottom: auto; + right: 15px; + background: url("../img/arrow.svg") no-repeat center center; + background-size: 8px 11px; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.pushy-submenu > a.pushy-submenu-open::after { + -webkit-transform: translateY(-50%) rotate(90deg); + -moz-transform: translateY(-50%) rotate(90deg); + -ms-transform: translateY(-50%) rotate(90deg); + -o-transform: translateY(-50%) rotate(90deg); + transform: translateY(-50%) rotate(90deg); } diff --git a/demo.html b/demo.html index db35626..b11f3de 100644 --- a/demo.html +++ b/demo.html @@ -19,12 +19,25 @@ diff --git a/img/arrow.svg b/img/arrow.svg new file mode 100644 index 0000000..5b9b407 --- /dev/null +++ b/img/arrow.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/js/pushy.js b/js/pushy.js index c69486d..3118253 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -9,13 +9,17 @@ $(function() { 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 - 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 + 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-item'), //css classes to toggle the menu menuSpeed = 200, //jQuery fallback menu speed - menuWidth = pushy.width() + "px"; //jQuery fallback menu width + menuWidth = pushy.width() + 'px', //jQuery fallback menu width + submenuClass = '.pushy-submenu', + submenuOpenClass = 'pushy-submenu-open', + submenuLinksClass = '.pushy-submenu ul', + submenu = $(submenuClass); function togglePushy(){ body.toggleClass(pushyActiveClass); //toggle site overlay @@ -24,6 +28,17 @@ $(function() { push.toggleClass(pushClass); //css class to add pushy capability } + //submenu + submenu.children('a').on('click', function(event){ + event.preventDefault(); + $(this).toggleClass(submenuOpenClass) + .next(submenuLinksClass).slideToggle(200) + .end().parent(submenuClass) + .siblings(submenuClass).children('a') + .removeClass(submenuOpenClass) + .next(submenuLinksClass).slideUp(200); + }); + function openPushyFallback(){ body.addClass(pushyActiveClass); pushy.animate({left: "0px"}, menuSpeed); diff --git a/js/pushy.min.js b/js/pushy.min.js index 16e4c18..58a115f 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){e.toggleClass(j),d.toggleClass(i),f.toggleClass(k),g.toggleClass(l)}function b(){e.addClass(j),d.animate({left:"0px"},n),f.animate({left:o},n),g.animate({left:o},n)}function c(){e.removeClass(j),d.animate({left:"-"+o},n),f.animate({left:"0px"},n),g.animate({left:"0px"},n)}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i="pushy-left pushy-open",j="pushy-active",k="container-push",l="push-push",m=$(".menu-btn, .pushy a"),n=200,o=d.width()+"px";if(cssTransforms3d=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}())m.click(function(){a()}),h.click(function(){a()});else{d.css({left:"-"+o}),f.css({"overflow-x":"hidden"});var p=!0;m.click(function(){p?(b(),p=!1):(c(),p=!0)}),h.click(function(){p?(b(),p=!1):(c(),p=!0)})}}); \ No newline at end of file +$(function(){function a(){e.toggleClass(j),d.toggleClass(i),f.toggleClass(k),g.toggleClass(l)}function b(){e.addClass(j),d.animate({left:"0px"},n),f.animate({left:o},n),g.animate({left:o},n)}function c(){e.removeClass(j),d.animate({left:"-"+o},n),f.animate({left:"0px"},n),g.animate({left:"0px"},n)}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i="pushy-left pushy-open",j="pushy-active",k="container-push",l="push-push",m=$(".menu-btn, .pushy-item"),n=200,o=d.width()+"px",p=".pushy-submenu",q="pushy-submenu-open",r=".pushy-submenu ul",s=$(p);s.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(q).next(r).slideToggle(200).end().parent(p).siblings(p).children("a").removeClass(q).next(r).slideUp(200)});var t=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(t)m.on("click",function(){a()}),h.on("click",function(){a()});else{d.css({left:"-"+o}),f.css({"overflow-x":"hidden"});var u=!0;m.on("click",function(){u?(b(),u=!1):(c(),u=!0)}),h.on("click",function(){u?(b(),u=!1):(c(),u=!0)})}}); \ No newline at end of file From d9fed7b1ebe837eb386a46e46c7fe8ac5a10de89 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 15:57:05 -0500 Subject: [PATCH 05/48] fixed menu not opening on jQuery animation fallback --- js/pushy.js | 2 +- js/pushy.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index 3118253..2495601 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -41,7 +41,7 @@ $(function() { 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 } diff --git a/js/pushy.min.js b/js/pushy.min.js index 58a115f..d9a330a 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){e.toggleClass(j),d.toggleClass(i),f.toggleClass(k),g.toggleClass(l)}function b(){e.addClass(j),d.animate({left:"0px"},n),f.animate({left:o},n),g.animate({left:o},n)}function c(){e.removeClass(j),d.animate({left:"-"+o},n),f.animate({left:"0px"},n),g.animate({left:"0px"},n)}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i="pushy-left pushy-open",j="pushy-active",k="container-push",l="push-push",m=$(".menu-btn, .pushy-item"),n=200,o=d.width()+"px",p=".pushy-submenu",q="pushy-submenu-open",r=".pushy-submenu ul",s=$(p);s.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(q).next(r).slideToggle(200).end().parent(p).siblings(p).children("a").removeClass(q).next(r).slideUp(200)});var t=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(t)m.on("click",function(){a()}),h.on("click",function(){a()});else{d.css({left:"-"+o}),f.css({"overflow-x":"hidden"});var u=!0;m.on("click",function(){u?(b(),u=!1):(c(),u=!0)}),h.on("click",function(){u?(b(),u=!1):(c(),u=!0)})}}); \ No newline at end of file +$(function(){function a(){e.toggleClass(j),d.toggleClass(i),f.toggleClass(k),g.toggleClass(l)}function b(){e.addClass(j),d.animate({left:o},n),f.animate({left:o},n),g.animate({left:o},n)}function c(){e.removeClass(j),d.animate({left:"-"+o},n),f.animate({left:"0px"},n),g.animate({left:"0px"},n)}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i="pushy-left pushy-open",j="pushy-active",k="container-push",l="push-push",m=$(".menu-btn, .pushy-item"),n=200,o=d.width()+"px",p=".pushy-submenu",q="pushy-submenu-open",r=".pushy-submenu ul",s=$(p);s.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(q).next(r).slideToggle(200).end().parent(p).siblings(p).children("a").removeClass(q).next(r).slideUp(200)});var t=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(t)m.on("click",function(){a()}),h.on("click",function(){a()});else{d.css({left:"-"+o}),f.css({"overflow-x":"hidden"});var u=!0;m.on("click",function(){u?(b(),u=!1):(c(),u=!0)}),h.on("click",function(){u?(b(),u=!1):(c(),u=!0)})}}); \ No newline at end of file From 7807d876532e32971e20536d0613ba07779030dc Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:11:04 -0500 Subject: [PATCH 06/48] flattened menu design --- css/pushy.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index 546f0ef..0c2e96f 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -11,12 +11,8 @@ height: 100%; top: 0; z-index: 9999; - background: #333332; + background: #191918; font-size: 0.9em; - font-weight: bold; - -webkit-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7); - -moz-box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7); - box-shadow: inset -10px 0 6px -9px rgba(0, 0, 0, .7); overflow: auto; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } @@ -25,16 +21,17 @@ display: block; color: #b3b3b1; padding: 15px 30px; - border-bottom: 1px solid rgba(0, 0, 0, .1); - border-top: 1px solid rgba(255, 255, 255, .1); text-decoration: none; } .pushy a:hover{ - background: #00b4ff; color: #FFF; } +.pushy ul:first-child{ + margin-top: 10px; +} + /* Menu Movement */ .pushy-left{ From ed7439f20d340794911275df27eb9fe081398eb4 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:17:51 -0500 Subject: [PATCH 07/48] updated gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index fcdc90f..9af45c5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ /index.html node_modules +.sass-cache # Compiled source # ################### From 4f3b2d9fe0a2448489190e426ddecc757c5ee818 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:18:21 -0500 Subject: [PATCH 08/48] added sass --- Gruntfile.js | 23 ++++- css/pushy.css | 242 ++++++++++++++++++++++++---------------------- css/pushy.css.map | 7 ++ package.json | 1 + scss/pushy.scss | 154 +++++++++++++++++++++++++++++ 5 files changed, 307 insertions(+), 120 deletions(-) create mode 100644 css/pushy.css.map create mode 100644 scss/pushy.scss diff --git a/Gruntfile.js b/Gruntfile.js index a1ab38e..72cd5da 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -7,9 +7,13 @@ module.exports = function(grunt) { options: { livereload: true, }, + css: { + files: ['scss/*.scss'], + tasks: ['sass-task'], + }, js: { files: ['js/pushy.js'], - tasks: ['default'] + tasks: ['js-task'], }, }, concat: { @@ -29,15 +33,28 @@ module.exports = function(grunt) { src: 'js/pushy.min.js', dest: 'js/pushy.min.js' } + }, + sass: { + dist: { + options: { + style: 'expanded' //output style: nested, compact, compressed, expanded + }, + files: { + 'css/pushy.css': 'scss/pushy.scss' // 'destination': 'source' + } + } } }); // Load grunt plugins + grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); - // Default task(s). - grunt.registerTask('default', ['concat', 'uglify']); + // Default task(s). + grunt.registerTask('default', ['watch']); + grunt.registerTask('js-task', ['concat', 'uglify']); + grunt.registerTask('sass-task', ['sass']); }; \ No newline at end of file diff --git a/css/pushy.css b/css/pushy.css index 0c2e96f..7d495d7 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -2,153 +2,161 @@ * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ - /* Menu Appearance */ - -.pushy{ - position: fixed; - width: 200px; - height: 100%; - top: 0; - z-index: 9999; - background: #191918; - font-size: 0.9em; - overflow: auto; - -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ +.pushy { + position: fixed; + width: 200px; + height: 100%; + top: 0; + z-index: 9999; + background: #191918; + font-size: 0.9em; + overflow: auto; + -webkit-overflow-scrolling: touch; + /* enables momentum scrolling in iOS overflow elements */ } -.pushy a{ - display: block; - color: #b3b3b1; - padding: 15px 30px; - text-decoration: none; +.pushy a { + display: block; + color: #b3b3b1; + padding: 15px 30px; + text-decoration: none; } -.pushy a:hover{ - color: #FFF; +.pushy a:hover { + color: #FFF; } -.pushy ul:first-child{ - margin-top: 10px; +.pushy ul:first-child { + margin-top: 10px; } /* Menu Movement */ - -.pushy-left{ - -webkit-transform: translate3d(-200px,0,0); - -moz-transform: translate3d(-200px,0,0); - -ms-transform: translate3d(-200px,0,0); - -o-transform: translate3d(-200px,0,0); - transform: translate3d(-200px,0,0); +.pushy-left { + -webkit-transform: translate3d(-200px, 0, 0); + -moz-transform: translate3d(-200px, 0, 0); + -ms-transform: translate3d(-200px, 0, 0); + -o-transform: translate3d(-200px, 0, 0); + transform: translate3d(-200px, 0, 0); } -.pushy-open{ - -webkit-transform: translate3d(0,0,0); - -moz-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - -o-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); +.pushy-open { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } -.container-push, .push-push{ - -webkit-transform: translate3d(200px,0,0); - -moz-transform: translate3d(200px,0,0); - -ms-transform: translate3d(200px,0,0); - -o-transform: translate3d(200px,0,0); - transform: translate3d(200px,0,0); +.container-push, .push-push { + -webkit-transform: translate3d(200px, 0, 0); + -moz-transform: translate3d(200px, 0, 0); + -ms-transform: translate3d(200px, 0, 0); + -o-transform: translate3d(200px, 0, 0); + transform: translate3d(200px, 0, 0); } /* Menu Transitions */ - -.pushy, #container, .push{ - -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); - -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); - -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); - transition: transform .2s cubic-bezier(.16, .68, .43, .99); +.pushy, #container, .push { + -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); + -moz-transition: -moz-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); + -o-transition: -o-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); + transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); } /* Site Overlay */ - -.site-overlay{ - display: none; +.site-overlay { + display: none; +} + +.pushy-active .site-overlay { + display: block; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 9998; + background-color: rgba(0, 0, 0, 0.5); + -webkit-animation: fade 500ms; + -moz-animation: fade 500ms; + -o-animation: fade 500ms; + animation: fade 500ms; +} + +@keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-moz-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-o-keyframes fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } - -.pushy-active .site-overlay{ - display: block; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 9998; - background-color: rgba(0,0,0,0.5); - -webkit-animation: fade 500ms; - -moz-animation: fade 500ms; - -o-animation: fade 500ms; - animation: fade 500ms; -} - -@keyframes fade{ - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-moz-keyframes fade{ - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-webkit-keyframes fade{ - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-o-keyframes fade{ - 0% { opacity: 0; } - 100% { opacity: 1; } -} - /* Submenu */ - -.pushy-submenu ul{ - display: none; - padding-left: 15px; +.pushy-submenu ul { + display: none; + padding-left: 15px; } /* Submenu Icon */ - .pushy-submenu > a { - position: relative; + position: relative; } .pushy-submenu > a::after { - content: ''; - display: block; - height: 11px; - width: 8px; - position: absolute; - top: 50%; - bottom: auto; - right: 15px; - background: url("../img/arrow.svg") no-repeat center center; - background-size: 8px 11px; - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); - transform: translateY(-50%); - -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; - transition-property: transform; - -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; - transition-duration: 0.2s; + content: ''; + display: block; + height: 11px; + width: 8px; + position: absolute; + top: 50%; + bottom: auto; + right: 15px; + background: url("../img/arrow.svg") no-repeat center center; + background-size: 8px 11px; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } .pushy-submenu > a.pushy-submenu-open::after { - -webkit-transform: translateY(-50%) rotate(90deg); - -moz-transform: translateY(-50%) rotate(90deg); - -ms-transform: translateY(-50%) rotate(90deg); - -o-transform: translateY(-50%) rotate(90deg); - transform: translateY(-50%) rotate(90deg); + -webkit-transform: translateY(-50%) rotate(90deg); + -moz-transform: translateY(-50%) rotate(90deg); + -ms-transform: translateY(-50%) rotate(90deg); + -o-transform: translateY(-50%) rotate(90deg); + transform: translateY(-50%) rotate(90deg); } + +/*# sourceMappingURL=pushy.css.map */ diff --git a/css/pushy.css.map b/css/pushy.css.map new file mode 100644 index 0000000..2de9667 --- /dev/null +++ b/css/pushy.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["../scss/pushy.scss"], +"names": [], +"file": "pushy.css" +} diff --git a/package.json b/package.json index b5e0247..2cc0390 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "devDependencies": { "grunt": "~0.4.4", + "grunt-contrib-sass": "~0.9.2", "grunt-contrib-watch": "~0.6.1", "grunt-contrib-concat": "~0.4.0", "grunt-contrib-uglify": "~0.4.0" diff --git a/scss/pushy.scss b/scss/pushy.scss new file mode 100644 index 0000000..0c2e96f --- /dev/null +++ b/scss/pushy.scss @@ -0,0 +1,154 @@ +/*! Pushy - v0.9.2 - 2014-9-13 +* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. +* https://github.com/christophery/pushy/ +* by Christopher Yee */ + +/* Menu Appearance */ + +.pushy{ + position: fixed; + width: 200px; + height: 100%; + top: 0; + z-index: 9999; + background: #191918; + font-size: 0.9em; + overflow: auto; + -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ +} + +.pushy a{ + display: block; + color: #b3b3b1; + padding: 15px 30px; + text-decoration: none; +} + +.pushy a:hover{ + color: #FFF; +} + +.pushy ul:first-child{ + margin-top: 10px; +} + +/* Menu Movement */ + +.pushy-left{ + -webkit-transform: translate3d(-200px,0,0); + -moz-transform: translate3d(-200px,0,0); + -ms-transform: translate3d(-200px,0,0); + -o-transform: translate3d(-200px,0,0); + transform: translate3d(-200px,0,0); +} + +.pushy-open{ + -webkit-transform: translate3d(0,0,0); + -moz-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + -o-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); +} + +.container-push, .push-push{ + -webkit-transform: translate3d(200px,0,0); + -moz-transform: translate3d(200px,0,0); + -ms-transform: translate3d(200px,0,0); + -o-transform: translate3d(200px,0,0); + transform: translate3d(200px,0,0); +} + +/* Menu Transitions */ + +.pushy, #container, .push{ + -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); + -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); + -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); + transition: transform .2s cubic-bezier(.16, .68, .43, .99); +} + +/* Site Overlay */ + +.site-overlay{ + display: none; +} + +.pushy-active .site-overlay{ + display: block; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 9998; + background-color: rgba(0,0,0,0.5); + -webkit-animation: fade 500ms; + -moz-animation: fade 500ms; + -o-animation: fade 500ms; + animation: fade 500ms; +} + +@keyframes fade{ + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-moz-keyframes fade{ + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-webkit-keyframes fade{ + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@-o-keyframes fade{ + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +/* Submenu */ + +.pushy-submenu ul{ + display: none; + padding-left: 15px; +} + +/* Submenu Icon */ + +.pushy-submenu > a { + position: relative; +} + +.pushy-submenu > a::after { + content: ''; + display: block; + height: 11px; + width: 8px; + position: absolute; + top: 50%; + bottom: auto; + right: 15px; + background: url("../img/arrow.svg") no-repeat center center; + background-size: 8px 11px; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} + +.pushy-submenu > a.pushy-submenu-open::after { + -webkit-transform: translateY(-50%) rotate(90deg); + -moz-transform: translateY(-50%) rotate(90deg); + -ms-transform: translateY(-50%) rotate(90deg); + -o-transform: translateY(-50%) rotate(90deg); + transform: translateY(-50%) rotate(90deg); +} From d3ad243cb34277eb1da0b9d770aef3b39c400dc6 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:21:48 -0500 Subject: [PATCH 09/48] changed pushy css to scss --- css/pushy.css | 10 ++--- css/pushy.css.map | 2 +- scss/pushy.scss | 108 +++++++++++++++++++++++----------------------- 3 files changed, 59 insertions(+), 61 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index 7d495d7..cdf67b0 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -15,18 +15,15 @@ -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } - .pushy a { display: block; color: #b3b3b1; padding: 15px 30px; text-decoration: none; } - .pushy a:hover { color: #FFF; } - .pushy ul:first-child { margin-top: 10px; } @@ -117,16 +114,16 @@ } } /* Submenu */ +.pushy-submenu { + /* Submenu Icon */ +} .pushy-submenu ul { display: none; padding-left: 15px; } - -/* Submenu Icon */ .pushy-submenu > a { position: relative; } - .pushy-submenu > a::after { content: ''; display: block; @@ -150,7 +147,6 @@ -moz-transition-duration: 0.2s; transition-duration: 0.2s; } - .pushy-submenu > a.pushy-submenu-open::after { -webkit-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg); diff --git a/css/pushy.css.map b/css/pushy.css.map index 2de9667..52876d7 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/pushy.scss b/scss/pushy.scss index 0c2e96f..fb99b90 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -15,21 +15,21 @@ font-size: 0.9em; overflow: auto; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ -} -.pushy a{ - display: block; - color: #b3b3b1; - padding: 15px 30px; - text-decoration: none; -} + a{ + display: block; + color: #b3b3b1; + padding: 15px 30px; + text-decoration: none; + } -.pushy a:hover{ - color: #FFF; -} + a:hover{ + color: #FFF; + } -.pushy ul:first-child{ - margin-top: 10px; + ul:first-child{ + margin-top: 10px; + } } /* Menu Movement */ @@ -110,45 +110,47 @@ /* Submenu */ -.pushy-submenu ul{ - display: none; - padding-left: 15px; -} - -/* Submenu Icon */ - -.pushy-submenu > a { - position: relative; -} - -.pushy-submenu > a::after { - content: ''; - display: block; - height: 11px; - width: 8px; - position: absolute; - top: 50%; - bottom: auto; - right: 15px; - background: url("../img/arrow.svg") no-repeat center center; - background-size: 8px 11px; - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); - transform: translateY(-50%); - -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; - transition-property: transform; - -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; - transition-duration: 0.2s; -} - -.pushy-submenu > a.pushy-submenu-open::after { - -webkit-transform: translateY(-50%) rotate(90deg); - -moz-transform: translateY(-50%) rotate(90deg); - -ms-transform: translateY(-50%) rotate(90deg); - -o-transform: translateY(-50%) rotate(90deg); - transform: translateY(-50%) rotate(90deg); +.pushy-submenu{ + ul{ + display: none; + padding-left: 15px; + } + + /* Submenu Icon */ + + > a { + position: relative; + } + + > a::after { + content: ''; + display: block; + height: 11px; + width: 8px; + position: absolute; + top: 50%; + bottom: auto; + right: 15px; + background: url("../img/arrow.svg") no-repeat center center; + background-size: 8px 11px; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; + } + + > a.pushy-submenu-open::after { + -webkit-transform: translateY(-50%) rotate(90deg); + -moz-transform: translateY(-50%) rotate(90deg); + -ms-transform: translateY(-50%) rotate(90deg); + -o-transform: translateY(-50%) rotate(90deg); + transform: translateY(-50%) rotate(90deg); + } } From 368f46a669f87d8bea0bf59881408393e7fbbcf8 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:25:58 -0500 Subject: [PATCH 10/48] removed css transition prefixes --- css/pushy.css | 3 --- css/pushy.css.map | 2 +- scss/pushy.scss | 3 --- 3 files changed, 1 insertion(+), 7 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index cdf67b0..76deb81 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -55,9 +55,6 @@ /* Menu Transitions */ .pushy, #container, .push { - -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); - -moz-transition: -moz-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); - -o-transition: -o-transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); } diff --git a/css/pushy.css.map b/css/pushy.css.map index 52876d7..fbf1efb 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/pushy.scss b/scss/pushy.scss index fb99b90..8337e22 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -61,9 +61,6 @@ /* Menu Transitions */ .pushy, #container, .push{ - -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99); - -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99); - -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99); transition: transform .2s cubic-bezier(.16, .68, .43, .99); } From f12009858cdd65e67eeeefcdc732374288278dae Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:40:41 -0500 Subject: [PATCH 11/48] removed moz + o prefixes --- css/pushy.css | 30 ------------------------------ css/pushy.css.map | 2 +- scss/pushy.scss | 24 ------------------------ 3 files changed, 1 insertion(+), 55 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index 76deb81..c38d65e 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -31,25 +31,19 @@ /* Menu Movement */ .pushy-left { -webkit-transform: translate3d(-200px, 0, 0); - -moz-transform: translate3d(-200px, 0, 0); -ms-transform: translate3d(-200px, 0, 0); - -o-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } .pushy-open { -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .container-push, .push-push { -webkit-transform: translate3d(200px, 0, 0); - -moz-transform: translate3d(200px, 0, 0); -ms-transform: translate3d(200px, 0, 0); - -o-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } @@ -73,8 +67,6 @@ z-index: 9998; background-color: rgba(0, 0, 0, 0.5); -webkit-animation: fade 500ms; - -moz-animation: fade 500ms; - -o-animation: fade 500ms; animation: fade 500ms; } @@ -86,14 +78,6 @@ opacity: 1; } } -@-moz-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} @-webkit-keyframes fade { 0% { opacity: 0; @@ -102,14 +86,6 @@ opacity: 1; } } -@-o-keyframes fade { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} /* Submenu */ .pushy-submenu { /* Submenu Icon */ @@ -133,22 +109,16 @@ background: url("../img/arrow.svg") no-repeat center center; background-size: 8px 11px; -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .pushy-submenu > a.pushy-submenu-open::after { -webkit-transform: translateY(-50%) rotate(90deg); - -moz-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); - -o-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } diff --git a/css/pushy.css.map b/css/pushy.css.map index fbf1efb..4b6ec3a 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,SAAS,EAAE,KAAK;EAChB,QAAQ,EAAE,IAAI;EACd,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;;;AAMxB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;;AAGtC,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;AAGjC,2BAA2B;EACvB,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;;;AAKrC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,2BAA2B;EACvB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/pushy.scss b/scss/pushy.scss index 8337e22..474ac50 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -36,25 +36,19 @@ .pushy-left{ -webkit-transform: translate3d(-200px,0,0); - -moz-transform: translate3d(-200px,0,0); -ms-transform: translate3d(-200px,0,0); - -o-transform: translate3d(-200px,0,0); transform: translate3d(-200px,0,0); } .pushy-open{ -webkit-transform: translate3d(0,0,0); - -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); - -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .container-push, .push-push{ -webkit-transform: translate3d(200px,0,0); - -moz-transform: translate3d(200px,0,0); -ms-transform: translate3d(200px,0,0); - -o-transform: translate3d(200px,0,0); transform: translate3d(200px,0,0); } @@ -80,8 +74,6 @@ z-index: 9998; background-color: rgba(0,0,0,0.5); -webkit-animation: fade 500ms; - -moz-animation: fade 500ms; - -o-animation: fade 500ms; animation: fade 500ms; } @@ -90,21 +82,11 @@ 100% { opacity: 1; } } -@-moz-keyframes fade{ - 0% { opacity: 0; } - 100% { opacity: 1; } -} - @-webkit-keyframes fade{ 0% { opacity: 0; } 100% { opacity: 1; } } -@-o-keyframes fade{ - 0% { opacity: 0; } - 100% { opacity: 1; } -} - /* Submenu */ .pushy-submenu{ @@ -131,23 +113,17 @@ background: url("../img/arrow.svg") no-repeat center center; background-size: 8px 11px; -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); - -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition-property: -webkit-transform; - -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; - -moz-transition-duration: 0.2s; transition-duration: 0.2s; } > a.pushy-submenu-open::after { -webkit-transform: translateY(-50%) rotate(90deg); - -moz-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); - -o-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } } From 0d1993fd548d18f251c036d9b25bf88f5749d0fe Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 16:42:26 -0500 Subject: [PATCH 12/48] remove horizontal scrolling --- css/demo.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/demo.css b/css/demo.css index 246b614..ba82ab7 100644 --- a/css/demo.css +++ b/css/demo.css @@ -1,5 +1,6 @@ html, body{ -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */ + overflow-x: hidden; } /* Lists */ From 5221bb945573ae906abb80f9245c49ff030a0567 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 18:08:48 -0500 Subject: [PATCH 13/48] updated README --- README.md | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2390111..e153f75 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ Pushy has been implemented on many sites, [check them out!](https://github.com/c - jQuery animation fallback for IE 7 - 9. - Menu closes when a link is selected. - Menu closes when the site overlay is selected. +- Collapsible submenus. - It's responsive! ##Requirements @@ -31,8 +32,17 @@ Download the [packaged source file](https://github.com/christophery/pushy/archiv @@ -96,14 +106,27 @@ html, body{ } ``` +- Only links with the CSS class of ```pushy-item``` will close the menu. + +```html + +``` + ##Browser Compatibility | Desktop | Mobile | | ------------- | -------------------------------------------| | IE 9-11 | Chrome (Android 4.x+) | -| Chrome | Android Browser (Android 4.x+) | -| Firefox | Safari (iOS 7) | -| Safari (Mac) | Internet Explorer Mobile (Windows Phone 8) | +| Chrome | Safari (iOS 9) | +| Firefox | +| Safari (Mac) | ##Version History From 5847c8127b060817148e2b95ff699f461e932b1a Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Mon, 22 Feb 2016 18:19:10 -0500 Subject: [PATCH 14/48] updated year --- LICENSE.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE.txt b/LICENSE.txt index d64a8f5..848a0b1 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 Christopher Yee +Copyright (c) 2016 Christopher Yee http://www.christopheryee.ca Permission is hereby granted, free of charge, to any person obtaining From f2b21a5900226096136b36a0014bcbc7f429ea6f Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 09:57:16 -0500 Subject: [PATCH 15/48] changed demo.css into scss --- Gruntfile.js | 3 ++- css/demo.css | 46 +++++++++++++++++++++++----------------------- css/demo.css.map | 7 +++++++ scss/demo.scss | 35 +++++++++++++++++++++++++++++++++++ 4 files changed, 67 insertions(+), 24 deletions(-) create mode 100644 css/demo.css.map create mode 100644 scss/demo.scss diff --git a/Gruntfile.js b/Gruntfile.js index 72cd5da..4193f87 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -40,7 +40,8 @@ module.exports = function(grunt) { style: 'expanded' //output style: nested, compact, compressed, expanded }, files: { - 'css/pushy.css': 'scss/pushy.scss' // 'destination': 'source' + 'css/pushy.css': 'scss/pushy.scss', // 'destination': 'source' + 'css/demo.css': 'scss/demo.scss' } } } diff --git a/css/demo.css b/css/demo.css index ba82ab7..28464a9 100644 --- a/css/demo.css +++ b/css/demo.css @@ -1,35 +1,35 @@ -html, body{ - -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */ - overflow-x: hidden; +html, body { + -webkit-tap-highlight-color: transparent; + /* disable webkit tap highlight */ + overflow-x: hidden; } /* Lists */ - -ul{ - margin: 0; - padding: 0; +ul { + margin: 0; + padding: 0; } /* Container */ - -#container{ - position: relative; - padding: 20px 40px; +#container { + position: relative; + padding: 20px 40px; } /* Menu Button */ +.menu-btn { + width: 100px; + padding: 10px; + margin-bottom: 30px; + background: #000; + color: #FFF; + text-align: center; + cursor: pointer; +} -.menu-btn{ - width: 100px; - padding: 10px; - margin-bottom: 30px; - background: #000; - color: #FFF; - text-align: center; - cursor: pointer; +.menu-btn:hover { + background: #00b4ff; + color: #FFF; } -.menu-btn:hover{ - background: #00b4ff; - color: #FFF; -} \ No newline at end of file +/*# sourceMappingURL=demo.css.map */ diff --git a/css/demo.css.map b/css/demo.css.map new file mode 100644 index 0000000..524a0cc --- /dev/null +++ b/css/demo.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;;;;AAKnB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;;AAGhB,eAAe;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI", +"sources": ["../scss/demo.scss"], +"names": [], +"file": "demo.css" +} diff --git a/scss/demo.scss b/scss/demo.scss new file mode 100644 index 0000000..ba82ab7 --- /dev/null +++ b/scss/demo.scss @@ -0,0 +1,35 @@ +html, body{ + -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */ + overflow-x: hidden; +} + +/* Lists */ + +ul{ + margin: 0; + padding: 0; +} + +/* Container */ + +#container{ + position: relative; + padding: 20px 40px; +} + +/* Menu Button */ + +.menu-btn{ + width: 100px; + padding: 10px; + margin-bottom: 30px; + background: #000; + color: #FFF; + text-align: center; + cursor: pointer; +} + +.menu-btn:hover{ + background: #00b4ff; + color: #FFF; +} \ No newline at end of file From 7a9ab9a43b1fedf5f46180dabe06182ceb644717 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 10:00:10 -0500 Subject: [PATCH 16/48] consolidated pushy-open class, fixed brief menu visibility --- css/pushy.css | 6 +++--- css/pushy.css.map | 2 +- js/pushy.js | 21 ++++++++++++--------- js/pushy.min.js | 2 +- scss/pushy.scss | 6 +++--- 5 files changed, 20 insertions(+), 17 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index c38d65e..7d28524 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -10,8 +10,8 @@ top: 0; z-index: 9999; background: #191918; - font-size: 0.9em; overflow: auto; + visibility: hidden; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ } @@ -41,7 +41,7 @@ transform: translate3d(0, 0, 0); } -.container-push, .push-push { +#container.pushy-open, .push-push { -webkit-transform: translate3d(200px, 0, 0); -ms-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); @@ -57,7 +57,7 @@ display: none; } -.pushy-active .site-overlay { +.site-overlay.pushy-open { display: block; position: fixed; top: 0; diff --git a/css/pushy.css.map b/css/pushy.css.map index 4b6ec3a..ced17b6 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,SAAS,EAAE,KAAK;EAChB,QAAQ,EAAE,IAAI;EACd,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;;;AAMxB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;;AAGtC,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;AAGjC,2BAA2B;EACvB,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;;;AAKrC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,2BAA2B;EACvB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", +"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;;;AAMxB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;;AAGtC,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;AAGjC,iCAAiC;EAC7B,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;;;AAKrC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,wBAAwB;EACpB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/js/pushy.js b/js/pushy.js index 2495601..eb89535 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -9,9 +9,7 @@ $(function() { 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 - pushyActiveClass = 'pushy-active', //css class to toggle site overlay - containerClass = 'container-push', //container open class + pushyClass = 'pushy-open', //menu position & menu open class pushClass = 'push-push', //css class to add pushy capability menuBtn = $('.menu-btn, .pushy-item'), //css classes to toggle the menu menuSpeed = 200, //jQuery fallback menu speed @@ -22,9 +20,9 @@ $(function() { submenu = $(submenuClass); function togglePushy(){ - body.toggleClass(pushyActiveClass); //toggle site overlay + siteOverlay.toggleClass(pushyClass); //toggle site overlay pushy.toggleClass(pushyClass); - container.toggleClass(containerClass); + container.toggleClass(pushyClass); push.toggleClass(pushClass); //css class to add pushy capability } @@ -40,14 +38,14 @@ $(function() { }); function openPushyFallback(){ - body.addClass(pushyActiveClass); - pushy.animate({left: menuWidth}, menuSpeed); + siteOverlay.addClass(pushyClass); + pushy.animate({left: "0px"}, menuSpeed); container.animate({left: menuWidth}, menuSpeed); push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability } function closePushyFallback(){ - body.removeClass(pushyActiveClass); + siteOverlay.removeClass(pushyClass); pushy.animate({left: "-" + menuWidth}, menuSpeed); container.animate({left: "0px"}, menuSpeed); push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability @@ -81,6 +79,9 @@ $(function() { })(); if(cssTransforms3d){ + //make menu visible + pushy.css({'visibility': 'visible'}); + //toggle menu menuBtn.on('click', function(){ togglePushy(); @@ -91,7 +92,9 @@ $(function() { }); }else{ //jQuery fallback - pushy.css({left: "-" + menuWidth}); //hide menu by default + pushy.css({left: "-" + menuWidth}) //hide menu by default + .css({'visibility': 'visible'}); //make menu visible + container.css({"overflow-x": "hidden"}); //fixes IE scrollbar issue //keep track of menu state (open/close) diff --git a/js/pushy.min.js b/js/pushy.min.js index d9a330a..7460af8 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){e.toggleClass(j),d.toggleClass(i),f.toggleClass(k),g.toggleClass(l)}function b(){e.addClass(j),d.animate({left:o},n),f.animate({left:o},n),g.animate({left:o},n)}function c(){e.removeClass(j),d.animate({left:"-"+o},n),f.animate({left:"0px"},n),g.animate({left:"0px"},n)}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i="pushy-left pushy-open",j="pushy-active",k="container-push",l="push-push",m=$(".menu-btn, .pushy-item"),n=200,o=d.width()+"px",p=".pushy-submenu",q="pushy-submenu-open",r=".pushy-submenu ul",s=$(p);s.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(q).next(r).slideToggle(200).end().parent(p).siblings(p).children("a").removeClass(q).next(r).slideUp(200)});var t=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(t)m.on("click",function(){a()}),h.on("click",function(){a()});else{d.css({left:"-"+o}),f.css({"overflow-x":"hidden"});var u=!0;m.on("click",function(){u?(b(),u=!1):(c(),u=!0)}),h.on("click",function(){u?(b(),u=!1):(c(),u=!0)})}}); \ No newline at end of file +$(function(){function a(){g.toggleClass(h),d.toggleClass(h),e.toggleClass(h),f.toggleClass(i)}function b(){g.addClass(h),d.animate({left:"0px"},k),e.animate({left:l},k),f.animate({left:l},k)}function c(){g.removeClass(h),d.animate({left:"-"+l},k),e.animate({left:"0px"},k),f.animate({left:"0px"},k)}var d=$(".pushy"),e=($("body"),$("#container")),f=$(".push"),g=$(".site-overlay"),h="pushy-open",i="push-push",j=$(".menu-btn, .pushy-item"),k=200,l=d.width()+"px",m=".pushy-submenu",n="pushy-submenu-open",o=".pushy-submenu ul",p=$(m);p.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(n).next(o).slideToggle(200).end().parent(m).siblings(m).children("a").removeClass(n).next(o).slideUp(200)});var q=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(q)d.css({visibility:"visible"}),j.on("click",function(){a()}),g.on("click",function(){a()});else{d.css({left:"-"+l}).css({visibility:"visible"}),e.css({"overflow-x":"hidden"});var r=!0;j.on("click",function(){r?(b(),r=!1):(c(),r=!0)}),g.on("click",function(){r?(b(),r=!1):(c(),r=!0)})}}); \ No newline at end of file diff --git a/scss/pushy.scss b/scss/pushy.scss index 474ac50..22fd379 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -12,8 +12,8 @@ top: 0; z-index: 9999; background: #191918; - font-size: 0.9em; overflow: auto; + visibility: hidden; -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */ a{ @@ -46,7 +46,7 @@ transform: translate3d(0,0,0); } -.container-push, .push-push{ +#container.pushy-open, .push-push{ -webkit-transform: translate3d(200px,0,0); -ms-transform: translate3d(200px,0,0); transform: translate3d(200px,0,0); @@ -64,7 +64,7 @@ display: none; } -.pushy-active .site-overlay{ +.site-overlay.pushy-open{ display: block; position: fixed; top: 0; From c6189b78d8dc4868f6b5011325b002a8483819ea Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 10:13:10 -0500 Subject: [PATCH 17/48] renamed state var to opened --- js/pushy.js | 22 +++++++++++----------- js/pushy.min.js | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index eb89535..b0c5e55 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -98,27 +98,27 @@ $(function() { container.css({"overflow-x": "hidden"}); //fixes IE scrollbar issue //keep track of menu state (open/close) - var state = true; + var opened = false; //toggle menu menuBtn.on('click', function(){ - if (state) { - openPushyFallback(); - state = false; - } else { + if (opened) { closePushyFallback(); - state = true; + opened = false; + } else { + openPushyFallback(); + opened = true; } }); //close menu when clicking site overlay siteOverlay.on('click', function(){ - if (state) { - openPushyFallback(); - state = false; - } else { + if (opened) { closePushyFallback(); - state = true; + opened = false; + } else { + openPushyFallback(); + opened = true; } }); } diff --git a/js/pushy.min.js b/js/pushy.min.js index 7460af8..726dbbb 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){g.toggleClass(h),d.toggleClass(h),e.toggleClass(h),f.toggleClass(i)}function b(){g.addClass(h),d.animate({left:"0px"},k),e.animate({left:l},k),f.animate({left:l},k)}function c(){g.removeClass(h),d.animate({left:"-"+l},k),e.animate({left:"0px"},k),f.animate({left:"0px"},k)}var d=$(".pushy"),e=($("body"),$("#container")),f=$(".push"),g=$(".site-overlay"),h="pushy-open",i="push-push",j=$(".menu-btn, .pushy-item"),k=200,l=d.width()+"px",m=".pushy-submenu",n="pushy-submenu-open",o=".pushy-submenu ul",p=$(m);p.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(n).next(o).slideToggle(200).end().parent(m).siblings(m).children("a").removeClass(n).next(o).slideUp(200)});var q=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(q)d.css({visibility:"visible"}),j.on("click",function(){a()}),g.on("click",function(){a()});else{d.css({left:"-"+l}).css({visibility:"visible"}),e.css({"overflow-x":"hidden"});var r=!0;j.on("click",function(){r?(b(),r=!1):(c(),r=!0)}),g.on("click",function(){r?(b(),r=!1):(c(),r=!0)})}}); \ No newline at end of file +$(function(){function a(){g.toggleClass(h),d.toggleClass(h),e.toggleClass(h),f.toggleClass(i)}function b(){g.addClass(h),d.animate({left:"0px"},k),e.animate({left:l},k),f.animate({left:l},k)}function c(){g.removeClass(h),d.animate({left:"-"+l},k),e.animate({left:"0px"},k),f.animate({left:"0px"},k)}var d=$(".pushy"),e=($("body"),$("#container")),f=$(".push"),g=$(".site-overlay"),h="pushy-open",i="push-push",j=$(".menu-btn, .pushy-item"),k=200,l=d.width()+"px",m=".pushy-submenu",n="pushy-submenu-open",o=".pushy-submenu ul",p=$(m);p.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(n).next(o).slideToggle(200).end().parent(m).siblings(m).children("a").removeClass(n).next(o).slideUp(200)});var q=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(q)d.css({visibility:"visible"}),j.on("click",function(){a()}),g.on("click",function(){a()});else{d.css({left:"-"+l}).css({visibility:"visible"}),e.css({"overflow-x":"hidden"});var r=!1;j.on("click",function(){r?(c(),r=!1):(b(),r=!0)}),g.on("click",function(){r?(c(),r=!1):(b(),r=!0)})}}); \ No newline at end of file From e3576f7c36411142fb5ef44cb09660f74622fd4a Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 12:03:48 -0500 Subject: [PATCH 18/48] added right side menu position --- css/pushy.css | 23 ++++++++++++++++------ css/pushy.css.map | 2 +- js/pushy.js | 49 ++++++++++++++++++++++++++++++++++++++--------- js/pushy.min.js | 2 +- scss/pushy.scss | 26 +++++++++++++++++++------ 5 files changed, 79 insertions(+), 23 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index 7d28524..40139be 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -27,6 +27,9 @@ .pushy ul:first-child { margin-top: 10px; } +.pushy.pushy-right { + right: 0; +} /* Menu Movement */ .pushy-left { @@ -34,18 +37,26 @@ -ms-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } - -.pushy-open { - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); +.pushy-left ~ #container.pushy-open, +.pushy-left .push-push { + transform: translate3d(200px, 0, 0); } -#container.pushy-open, .push-push { +.pushy-right { -webkit-transform: translate3d(200px, 0, 0); -ms-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } +.pushy-right ~ #container.pushy-open, +.pushy-right .push-push { + transform: translate3d(-200px, 0, 0); +} + +.pushy-open { + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} /* Menu Transitions */ .pushy, #container, .push { diff --git a/css/pushy.css.map b/css/pushy.css.map index ced17b6..e482d02 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;;;AAMxB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;;AAGtC,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;AAGjC,iCAAiC;EAC7B,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;;;AAKrC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,wBAAwB;EACpB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", +"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;AAElC;sBACU;EACN,SAAS,EAAE,wBAAsB;;;AAIzC,YAAY;EACR,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;AAEjC;uBACU;EACN,SAAS,EAAE,yBAAuB;;;AAI1C,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAKjC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,wBAAwB;EACpB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/js/pushy.js b/js/pushy.js index b0c5e55..7222707 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -38,17 +38,39 @@ $(function() { }); function openPushyFallback(){ + //add site overlay siteOverlay.addClass(pushyClass); - pushy.animate({left: "0px"}, menuSpeed); - container.animate({left: menuWidth}, menuSpeed); - push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability + + //animate menu position based on CSS class + if( $('.pushy').hasClass('pushy-left') ){ + pushy.animate({left: "0px"}, menuSpeed); + container.animate({left: menuWidth}, menuSpeed); + //css class to add pushy capability + push.animate({left: menuWidth}, menuSpeed); + }else{ + pushy.animate({right: '0px'}, menuSpeed); + container.animate({right: menuWidth}, menuSpeed); + push.animate({right: menuWidth}, menuSpeed); + } + } function closePushyFallback(){ + //remove site overlay siteOverlay.removeClass(pushyClass); - pushy.animate({left: "-" + menuWidth}, menuSpeed); - container.animate({left: "0px"}, menuSpeed); - push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability + + //animate menu position based on CSS class + if( $('.pushy').hasClass('pushy-left') ){ + pushy.animate({left: "-" + menuWidth}, menuSpeed); + container.animate({left: "0px"}, menuSpeed); + //css class to add pushy capability + push.animate({left: "0px"}, menuSpeed); + }else{ + pushy.animate({right: "-" + menuWidth}, menuSpeed); + container.animate({right: "0px"}, menuSpeed); + push.animate({right: "0px"}, menuSpeed); + } + } //checks if 3d transforms are supported removing the modernizr dependency @@ -79,6 +101,7 @@ $(function() { })(); if(cssTransforms3d){ + //if(false){ //make menu visible pushy.css({'visibility': 'visible'}); @@ -92,10 +115,18 @@ $(function() { }); }else{ //jQuery fallback - pushy.css({left: "-" + menuWidth}) //hide menu by default - .css({'visibility': 'visible'}); //make menu visible - container.css({"overflow-x": "hidden"}); //fixes IE scrollbar issue + //hide menu by default + if( $('.pushy').hasClass('pushy-left') ){ + pushy.css({left: "-" + menuWidth}); + }else{ + pushy.css({right: "-" + menuWidth}); + } + + //make menu visible + pushy.css({'visibility': 'visible'}); + //fixes IE scrollbar issue + container.css({"overflow-x": "hidden"}); //keep track of menu state (open/close) var opened = false; diff --git a/js/pushy.min.js b/js/pushy.min.js index 726dbbb..9a4b00c 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){g.toggleClass(h),d.toggleClass(h),e.toggleClass(h),f.toggleClass(i)}function b(){g.addClass(h),d.animate({left:"0px"},k),e.animate({left:l},k),f.animate({left:l},k)}function c(){g.removeClass(h),d.animate({left:"-"+l},k),e.animate({left:"0px"},k),f.animate({left:"0px"},k)}var d=$(".pushy"),e=($("body"),$("#container")),f=$(".push"),g=$(".site-overlay"),h="pushy-open",i="push-push",j=$(".menu-btn, .pushy-item"),k=200,l=d.width()+"px",m=".pushy-submenu",n="pushy-submenu-open",o=".pushy-submenu ul",p=$(m);p.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(n).next(o).slideToggle(200).end().parent(m).siblings(m).children("a").removeClass(n).next(o).slideUp(200)});var q=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(q)d.css({visibility:"visible"}),j.on("click",function(){a()}),g.on("click",function(){a()});else{d.css({left:"-"+l}).css({visibility:"visible"}),e.css({"overflow-x":"hidden"});var r=!1;j.on("click",function(){r?(c(),r=!1):(b(),r=!0)}),g.on("click",function(){r?(c(),r=!1):(b(),r=!0)})}}); \ No newline at end of file +$(function(){function a(){g.toggleClass(h),d.toggleClass(h),e.toggleClass(h),f.toggleClass(i)}function b(){g.addClass(h),$(".pushy").hasClass("pushy-left")?(d.animate({left:"0px"},k),e.animate({left:l},k),f.animate({left:l},k)):(d.animate({right:"0px"},k),e.animate({right:l},k),f.animate({right:l},k))}function c(){g.removeClass(h),$(".pushy").hasClass("pushy-left")?(d.animate({left:"-"+l},k),e.animate({left:"0px"},k),f.animate({left:"0px"},k)):(d.animate({right:"-"+l},k),e.animate({right:"0px"},k),f.animate({right:"0px"},k))}var d=$(".pushy"),e=($("body"),$("#container")),f=$(".push"),g=$(".site-overlay"),h="pushy-open",i="push-push",j=$(".menu-btn, .pushy-item"),k=200,l=d.width()+"px",m=".pushy-submenu",n="pushy-submenu-open",o=".pushy-submenu ul",p=$(m);p.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(n).next(o).slideToggle(200).end().parent(m).siblings(m).children("a").removeClass(n).next(o).slideUp(200)});var q=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(q)d.css({visibility:"visible"}),j.on("click",function(){a()}),g.on("click",function(){a()});else{$(".pushy").hasClass("pushy-left")?d.css({left:"-"+l}):d.css({right:"-"+l}),d.css({visibility:"visible"}),e.css({"overflow-x":"hidden"});var r=!1;j.on("click",function(){r?(c(),r=!1):(b(),r=!0)}),g.on("click",function(){r?(c(),r=!1):(b(),r=!0)})}}); \ No newline at end of file diff --git a/scss/pushy.scss b/scss/pushy.scss index 22fd379..401a6f4 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -30,6 +30,10 @@ ul:first-child{ margin-top: 10px; } + + &.pushy-right{ + right: 0; + } } /* Menu Movement */ @@ -38,18 +42,28 @@ -webkit-transform: translate3d(-200px,0,0); -ms-transform: translate3d(-200px,0,0); transform: translate3d(-200px,0,0); -} -.pushy-open{ - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); + ~ #container.pushy-open, + .push-push{ + transform: translate3d(200px,0,0); + } } -#container.pushy-open, .push-push{ +.pushy-right{ -webkit-transform: translate3d(200px,0,0); -ms-transform: translate3d(200px,0,0); transform: translate3d(200px,0,0); + + ~ #container.pushy-open, + .push-push{ + transform: translate3d(-200px,0,0); + } +} + +.pushy-open{ + -webkit-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); } /* Menu Transitions */ From e46176e508be416e69c73d3f847a42df0de734fd Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 12:27:50 -0500 Subject: [PATCH 19/48] fixed .push CSS class --- css/demo.css | 9 +++++++++ css/demo.css.map | 2 +- css/pushy.css | 10 ++++++---- css/pushy.css.map | 2 +- demo.html | 8 ++++++++ js/pushy.js | 8 +++++++- js/pushy.min.js | 2 +- scss/demo.scss | 9 +++++++++ scss/pushy.scss | 8 ++++++-- 9 files changed, 48 insertions(+), 10 deletions(-) diff --git a/css/demo.css b/css/demo.css index 28464a9..f114bd5 100644 --- a/css/demo.css +++ b/css/demo.css @@ -14,6 +14,7 @@ ul { #container { position: relative; padding: 20px 40px; + padding-top: 120px; } /* Menu Button */ @@ -32,4 +33,12 @@ ul { color: #FFF; } +.site-header { + position: fixed; + background: red; + width: 100%; + height: 100px; + text-align: center; +} + /*# sourceMappingURL=demo.css.map */ diff --git a/css/demo.css.map b/css/demo.css.map index 524a0cc..ad17573 100644 --- a/css/demo.css.map +++ b/css/demo.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;;;;AAKnB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;;AAGhB,eAAe;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI", +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,KAAK;;;;AAKnB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;;AAGhB,eAAe;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;AAGZ,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,GAAG;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM", "sources": ["../scss/demo.scss"], "names": [], "file": "demo.css" diff --git a/css/pushy.css b/css/pushy.css index 40139be..81a3a18 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -37,8 +37,9 @@ -ms-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } -.pushy-left ~ #container.pushy-open, -.pushy-left .push-push { + +.pushy-open-left #container, +.pushy-open-left .push-push { transform: translate3d(200px, 0, 0); } @@ -47,8 +48,9 @@ -ms-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } -.pushy-right ~ #container.pushy-open, -.pushy-right .push-push { + +.pushy-open-right #container, +.pushy-open-right .push-push { transform: translate3d(-200px, 0, 0); } diff --git a/css/pushy.css.map b/css/pushy.css.map index e482d02..c728da9 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;AAElC;sBACU;EACN,SAAS,EAAE,wBAAsB;;;AAIzC,YAAY;EACR,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;AAEjC;uBACU;EACN,SAAS,EAAE,yBAAuB;;;AAI1C,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAKjC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,wBAAwB;EACpB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", +"mappings": ";;;;;AAOA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAAuB;EAC1C,aAAa,EAAE,yBAAuB;EACtC,SAAS,EAAE,yBAAuB;;;AAIlC;2BACU;EACN,SAAS,EAAE,wBAAsB;;;AAIzC,YAAY;EACR,iBAAiB,EAAE,wBAAsB;EACzC,aAAa,EAAE,wBAAsB;EACrC,SAAS,EAAE,wBAAsB;;;AAIjC;4BACU;EACN,SAAS,EAAE,yBAAuB;;;AAI1C,WAAW;EACP,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAKjC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAGjB,wBAAwB;EACpB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAGzB,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/demo.html b/demo.html index b11f3de..c1306f6 100644 --- a/demo.html +++ b/demo.html @@ -16,6 +16,8 @@ + +
Site header
@@ -73,8 +73,8 @@ bower install pushy ``` @@ -129,13 +129,13 @@ $menu_width: 400px; ``` -- Only links with the CSS class of ```pushy-item``` will close the menu. +- Only links with the CSS class of ```pushy-link``` will close the menu. ```html diff --git a/js/pushy.js b/js/pushy.js index 7c2e6ba..8ec82db 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -9,7 +9,7 @@ $(function() { container = $('#container'), //container css class push = $('.push'), //css class to add pushy capability siteOverlay = $('.site-overlay'), //site overlay - menuBtn = $('.menu-btn, .pushy-item'), //css classes to toggle the menu + menuBtn = $('.menu-btn, .pushy-link'), //css classes to toggle the menu menuSpeed = 200, //jQuery fallback menu speed menuWidth = pushy.width() + 'px', //jQuery fallback menu width submenuClass = '.pushy-submenu', diff --git a/js/pushy.min.js b/js/pushy.min.js index 70b8a84..17d2b5b 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){d.hasClass("pushy-left")?e.toggleClass("pushy-open-left"):e.toggleClass("pushy-open-right")}function b(){d.hasClass("pushy-left")?(e.addClass("pushy-open-left"),d.animate({left:"0px"},j),f.animate({left:k},j),g.animate({left:k},j)):(e.addClass("pushy-open-right"),d.animate({right:"0px"},j),f.animate({right:k},j),g.animate({right:k},j))}function c(){d.hasClass("pushy-left")?(e.removeClass("pushy-open-left"),d.animate({left:"-"+k},j),f.animate({left:"0px"},j),g.animate({left:"0px"},j)):(e.removeClass("pushy-open-right"),d.animate({right:"-"+k},j),f.animate({right:"0px"},j),g.animate({right:"0px"},j))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i=$(".menu-btn, .pushy-item"),j=200,k=d.width()+"px",l=".pushy-submenu",m="pushy-submenu-open",n=".pushy-submenu ul",o=$(l);o.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(m).next(n).slideToggle(200).end().parent(l).siblings(l).children("a").removeClass(m).next(n).slideUp(200)});var p=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(p)d.css({visibility:"visible"}),i.on("click",function(){a()}),h.on("click",function(){a()});else{d.hasClass("pushy-left")?d.css({left:"-"+k}):d.css({right:"-"+k}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var q=!1;i.on("click",function(){q?(c(),q=!1):(b(),q=!0)}),h.on("click",function(){q?(c(),q=!1):(b(),q=!0)})}}); \ No newline at end of file +$(function(){function a(){d.hasClass("pushy-left")?e.toggleClass("pushy-open-left"):e.toggleClass("pushy-open-right")}function b(){d.hasClass("pushy-left")?(e.addClass("pushy-open-left"),d.animate({left:"0px"},j),f.animate({left:k},j),g.animate({left:k},j)):(e.addClass("pushy-open-right"),d.animate({right:"0px"},j),f.animate({right:k},j),g.animate({right:k},j))}function c(){d.hasClass("pushy-left")?(e.removeClass("pushy-open-left"),d.animate({left:"-"+k},j),f.animate({left:"0px"},j),g.animate({left:"0px"},j)):(e.removeClass("pushy-open-right"),d.animate({right:"-"+k},j),f.animate({right:"0px"},j),g.animate({right:"0px"},j))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i=$(".menu-btn, .pushy-link"),j=200,k=d.width()+"px",l=".pushy-submenu",m="pushy-submenu-open",n=".pushy-submenu ul",o=$(l);o.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(m).next(n).slideToggle(200).end().parent(l).siblings(l).children("a").removeClass(m).next(n).slideUp(200)});var p=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(p)d.css({visibility:"visible"}),i.on("click",function(){a()}),h.on("click",function(){a()});else{d.hasClass("pushy-left")?d.css({left:"-"+k}):d.css({right:"-"+k}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var q=!1;i.on("click",function(){q?(c(),q=!1):(b(),q=!0)}),h.on("click",function(){q?(c(),q=!1):(b(),q=!0)})}}); \ No newline at end of file From d5b09c0561208d49d2fe65a90c7985ebae5950e6 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 15:06:49 -0500 Subject: [PATCH 30/48] updated README --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 242059b..007b914 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,9 @@ Download the [packaged source file](https://github.com/christophery/pushy/archiv 1. Add the stylesheet (pushy.css) in your head and the JS (pushy.min.js) file in your footer. -2. Insert the following markup into your body. +2. If you are using submenus, then you'll need to add the ```arrow.svg``` file into your `img` directory (optional). + +3. Insert the following markup into your body. ```html @@ -65,6 +67,15 @@ If your are comfortable with command line, you can install Pushy as a [Bower](ht bower install pushy ``` +##Grunt + +You can use the default Grunt task to watch and compile the SCSS and JS files. Don't forget to run ```npm install``` beforehand to install the dependencies. + +``` +npm install +grunt +``` + ##Tips - Use the ```.pushy-left``` or ```.pushy-right``` CSS class to specify the menu position. From 8ab0f7807f1c34f3859109b052fddafda3a8ae69 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 23 Feb 2016 16:00:05 -0500 Subject: [PATCH 31/48] put CSS classes in variables --- js/pushy.js | 23 +++++++++++++---------- js/pushy.min.js | 2 +- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index 8ec82db..c78df6f 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -8,6 +8,9 @@ $(function() { body = $('body'), container = $('#container'), //container css class 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 menuBtn = $('.menu-btn, .pushy-link'), //css classes to toggle the menu menuSpeed = 200, //jQuery fallback menu speed @@ -19,10 +22,10 @@ $(function() { function togglePushy(){ //add class to body based on menu position - if( pushy.hasClass('pushy-left') ){ - body.toggleClass('pushy-open-left'); + if( pushy.hasClass(pushyLeft) ){ + body.toggleClass(pushyOpenLeft); }else{ - body.toggleClass('pushy-open-right'); + body.toggleClass(pushyOpenRight); } } @@ -40,14 +43,14 @@ $(function() { function openPushyFallback(){ //animate menu position based on CSS class - if( pushy.hasClass('pushy-left') ){ - body.addClass('pushy-open-left'); + if( pushy.hasClass(pushyLeft) ){ + body.addClass(pushyOpenLeft); pushy.animate({left: "0px"}, menuSpeed); container.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability push.animate({left: menuWidth}, menuSpeed); }else{ - body.addClass('pushy-open-right'); + body.addClass(pushyOpenRight); pushy.animate({right: '0px'}, menuSpeed); container.animate({right: menuWidth}, menuSpeed); push.animate({right: menuWidth}, menuSpeed); @@ -58,14 +61,14 @@ $(function() { function closePushyFallback(){ //animate menu position based on CSS class - if( pushy.hasClass('pushy-left') ){ - body.removeClass('pushy-open-left'); + if( pushy.hasClass(pushyLeft) ){ + body.removeClass(pushyOpenLeft); pushy.animate({left: "-" + menuWidth}, menuSpeed); container.animate({left: "0px"}, menuSpeed); //css class to add pushy capability push.animate({left: "0px"}, menuSpeed); }else{ - body.removeClass('pushy-open-right'); + body.removeClass(pushyOpenRight); pushy.animate({right: "-" + menuWidth}, menuSpeed); container.animate({right: "0px"}, menuSpeed); push.animate({right: "0px"}, menuSpeed); @@ -117,7 +120,7 @@ $(function() { //jQuery fallback //hide menu by default - if( pushy.hasClass('pushy-left') ){ + if( pushy.hasClass(pushyLeft) ){ pushy.css({left: "-" + menuWidth}); }else{ pushy.css({right: "-" + menuWidth}); diff --git a/js/pushy.min.js b/js/pushy.min.js index 17d2b5b..459a50f 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){d.hasClass("pushy-left")?e.toggleClass("pushy-open-left"):e.toggleClass("pushy-open-right")}function b(){d.hasClass("pushy-left")?(e.addClass("pushy-open-left"),d.animate({left:"0px"},j),f.animate({left:k},j),g.animate({left:k},j)):(e.addClass("pushy-open-right"),d.animate({right:"0px"},j),f.animate({right:k},j),g.animate({right:k},j))}function c(){d.hasClass("pushy-left")?(e.removeClass("pushy-open-left"),d.animate({left:"-"+k},j),f.animate({left:"0px"},j),g.animate({left:"0px"},j)):(e.removeClass("pushy-open-right"),d.animate({right:"-"+k},j),f.animate({right:"0px"},j),g.animate({right:"0px"},j))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h=$(".site-overlay"),i=$(".menu-btn, .pushy-link"),j=200,k=d.width()+"px",l=".pushy-submenu",m="pushy-submenu-open",n=".pushy-submenu ul",o=$(l);o.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(m).next(n).slideToggle(200).end().parent(l).siblings(l).children("a").removeClass(m).next(n).slideUp(200)});var p=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(p)d.css({visibility:"visible"}),i.on("click",function(){a()}),h.on("click",function(){a()});else{d.hasClass("pushy-left")?d.css({left:"-"+k}):d.css({right:"-"+k}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var q=!1;i.on("click",function(){q?(c(),q=!1):(b(),q=!0)}),h.on("click",function(){q?(c(),q=!1):(b(),q=!0)})}}); \ No newline at end of file +$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu",p="pushy-submenu-open",q=".pushy-submenu ul",r=$(o);r.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(p).next(q).slideToggle(200).end().parent(o).siblings(o).children("a").removeClass(p).next(q).slideUp(200)});var s=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(s)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var t=!1;l.on("click",function(){t?(c(),t=!1):(b(),t=!0)}),k.on("click",function(){t?(c(),t=!1):(b(),t=!0)})}}); \ No newline at end of file From 9ed2f989eb0d6c6647bc48c77b10ce4b88a9636f Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Wed, 24 Feb 2016 18:38:06 -0500 Subject: [PATCH 32/48] updated demo file --- demo.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/demo.html b/demo.html index d57b7f1..ef2f600 100644 --- a/demo.html +++ b/demo.html @@ -37,9 +37,26 @@
  • Item 3
    • +
  • + Submenu 3 + +
    • +
  • + Submenu 4 + +
  • Item 1
  • Item 2
  • Item 3
    • +
  • Item 4
    • From e5dd348d870d6487ea72dd9731c805e4e55dd9bc Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Wed, 24 Feb 2016 18:42:56 -0500 Subject: [PATCH 33/48] replaced submenu toggle with CSS solution --- css/demo.css.map | 2 +- css/pushy.css | 19 ++++++++++++++++--- css/pushy.css.map | 2 +- js/pushy.js | 28 ++++++++++++++++++---------- js/pushy.min.js | 2 +- scss/pushy.scss | 23 ++++++++++++++++++++--- 6 files changed, 57 insertions(+), 19 deletions(-) diff --git a/css/demo.css.map b/css/demo.css.map index 0d0f240..e2403b1 100644 --- a/css/demo.css.map +++ b/css/demo.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;;AAMb,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;EAAE,kCAAkC;EAC9E,UAAU,EAAE,MAAM;;;AAGnB,WAAW;AAEX,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGd,eAAe;AAEf,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;AAGlB,iBAAiB;AAEjB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;AAIb,YAAY;AAEZ,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;AAGd,YAAY;AAEZ,YAAY;EACX,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", "sources": ["../scss/demo.scss"], "names": [], "file": "demo.css" diff --git a/css/pushy.css b/css/pushy.css index 41d39d7..5815c5b 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -105,13 +105,13 @@ opacity: 1; } } -/* Submenu */ +/* Submenu Appearance */ .pushy-submenu { /* Submenu Icon */ } .pushy-submenu ul { - display: none; padding-left: 15px; + transition: max-height 0.2s ease-in-out; } .pushy-submenu > a { position: relative; @@ -135,7 +135,20 @@ -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } -.pushy-submenu > a.pushy-submenu-open::after { + +/* Submenu Movement */ +.pushy-submenu-closed ul { + max-height: 0; + overflow: hidden; +} + +.pushy-submenu-open { + /* Submenu Icon */ +} +.pushy-submenu-open ul { + max-height: 1000px; +} +.pushy-submenu-open a::after { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); diff --git a/css/pushy.css.map b/css/pushy.css.map index d6c1ed0..7eb6dad 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC,yBAAyB;EACrB,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,OAAO,EAAE,IAAI;EACb,YAAY,EAAE,IAAI;;AAKtB,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,+CAA+C;EAC3D,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,2BAA2B,EAAE,iBAAiB;EAC9C,mBAAmB,EAAE,SAAS;EAC9B,2BAA2B,EAAE,IAAI;EACjC,mBAAmB,EAAE,IAAI;;AAG7B,4CAA8B;EAC1B,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", +"mappings": "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", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/js/pushy.js b/js/pushy.js index c78df6f..03c0aba 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -29,16 +29,24 @@ $(function() { } } - //submenu - submenu.children('a').on('click', function(event){ - event.preventDefault(); - $(this).toggleClass(submenuOpenClass) - .next(submenuLinksClass).slideToggle(200) - .end().parent(submenuClass) - .siblings(submenuClass).children('a') - .removeClass(submenuOpenClass) - .next(submenuLinksClass).slideUp(200); - }); + //hide submenu by default + $(submenuClass).addClass('pushy-submenu-closed'); + + //toggle submenu + $(submenuClass).on('click', function(event){ + var selected = $(this); + + if( selected.hasClass('pushy-submenu-closed') ) { + //hide opened submenus + $('.pushy-submenu').addClass('pushy-submenu-closed').removeClass('pushy-submenu-open'); + //show submenu + selected.removeClass('pushy-submenu-closed').addClass('pushy-submenu-open'); + }else{ + //hide submenu + selected.addClass('pushy-submenu-closed').removeClass('pushy-submenu-open'); + } + + }); function openPushyFallback(){ diff --git a/js/pushy.min.js b/js/pushy.min.js index 459a50f..943511b 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu",p="pushy-submenu-open",q=".pushy-submenu ul",r=$(o);r.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(p).next(q).slideToggle(200).end().parent(o).siblings(o).children("a").removeClass(p).next(q).slideUp(200)});var s=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(s)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var t=!1;l.on("click",function(){t?(c(),t=!1):(b(),t=!0)}),k.on("click",function(){t?(c(),t=!1):(b(),t=!0)})}}); \ No newline at end of file +$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu";$(o);$(o).addClass("pushy-submenu-closed"),$(o).on("click",function(a){var b=$(this);b.hasClass("pushy-submenu-closed")?($(".pushy-submenu").addClass("pushy-submenu-closed").removeClass("pushy-submenu-open"),b.removeClass("pushy-submenu-closed").addClass("pushy-submenu-open")):b.addClass("pushy-submenu-closed").removeClass("pushy-submenu-open")});var p=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(p)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var q=!1;l.on("click",function(){q?(c(),q=!1):(b(),q=!0)}),k.on("click",function(){q?(c(),q=!1):(b(),q=!0)})}}); \ No newline at end of file diff --git a/scss/pushy.scss b/scss/pushy.scss index 1cb7c5c..d1015dd 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -117,12 +117,12 @@ $menu_width: 200px; 100% { opacity: 1; } } -/* Submenu */ +/* Submenu Appearance */ .pushy-submenu{ ul{ - display: none; padding-left: 15px; + transition: max-height 0.2s ease-in-out; } /* Submenu Icon */ @@ -150,8 +150,25 @@ $menu_width: 200px; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } +} + +/* Submenu Movement */ + +.pushy-submenu-closed{ + ul{ + max-height: 0; + overflow: hidden; + } +} + +.pushy-submenu-open{ + ul{ + max-height: 1000px; + } + + /* Submenu Icon */ - > a.pushy-submenu-open::after { + a::after { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); From ccfa076b97ae72369a446255dfaccb6ba37110ca Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Wed, 24 Feb 2016 19:26:51 -0500 Subject: [PATCH 34/48] put classes into vars --- js/pushy.js | 12 ++++++------ js/pushy.min.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index 03c0aba..d371a1b 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -17,7 +17,7 @@ $(function() { menuWidth = pushy.width() + 'px', //jQuery fallback menu width submenuClass = '.pushy-submenu', submenuOpenClass = 'pushy-submenu-open', - submenuLinksClass = '.pushy-submenu ul', + submenuClosedClass = 'pushy-submenu-closed', submenu = $(submenuClass); function togglePushy(){ @@ -30,20 +30,20 @@ $(function() { } //hide submenu by default - $(submenuClass).addClass('pushy-submenu-closed'); + $(submenuClass).addClass(submenuClosedClass); //toggle submenu $(submenuClass).on('click', function(event){ var selected = $(this); - if( selected.hasClass('pushy-submenu-closed') ) { + if( selected.hasClass(submenuClosedClass) ) { //hide opened submenus - $('.pushy-submenu').addClass('pushy-submenu-closed').removeClass('pushy-submenu-open'); + $(submenuClass).addClass(submenuClosedClass).removeClass(submenuOpenClass); //show submenu - selected.removeClass('pushy-submenu-closed').addClass('pushy-submenu-open'); + selected.removeClass(submenuClosedClass).addClass(submenuOpenClass); }else{ //hide submenu - selected.addClass('pushy-submenu-closed').removeClass('pushy-submenu-open'); + selected.addClass(submenuClosedClass).removeClass(submenuOpenClass); } }); diff --git a/js/pushy.min.js b/js/pushy.min.js index 943511b..0dbb539 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu";$(o);$(o).addClass("pushy-submenu-closed"),$(o).on("click",function(a){var b=$(this);b.hasClass("pushy-submenu-closed")?($(".pushy-submenu").addClass("pushy-submenu-closed").removeClass("pushy-submenu-open"),b.removeClass("pushy-submenu-closed").addClass("pushy-submenu-open")):b.addClass("pushy-submenu-closed").removeClass("pushy-submenu-open")});var p=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(p)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var q=!1;l.on("click",function(){q?(c(),q=!1):(b(),q=!0)}),k.on("click",function(){q?(c(),q=!1):(b(),q=!0)})}}); \ No newline at end of file +$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu",p="pushy-submenu-open",q="pushy-submenu-closed";$(o);$(o).addClass(q),$(o).on("click",function(a){var b=$(this);b.hasClass(q)?($(o).addClass(q).removeClass(p),b.removeClass(q).addClass(p)):b.addClass(q).removeClass(p)});var r=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(r)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var s=!1;l.on("click",function(){s?(c(),s=!1):(b(),s=!0)}),k.on("click",function(){s?(c(),s=!1):(b(),s=!0)})}}); \ No newline at end of file From a62a7aa72b795acab3805b446940458131ee76e9 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Wed, 24 Feb 2016 19:28:49 -0500 Subject: [PATCH 35/48] removed event object --- js/pushy.js | 2 +- js/pushy.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index d371a1b..9036aba 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -33,7 +33,7 @@ $(function() { $(submenuClass).addClass(submenuClosedClass); //toggle submenu - $(submenuClass).on('click', function(event){ + $(submenuClass).on('click', function(){ var selected = $(this); if( selected.hasClass(submenuClosedClass) ) { diff --git a/js/pushy.min.js b/js/pushy.min.js index 0dbb539..e9d6154 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu",p="pushy-submenu-open",q="pushy-submenu-closed";$(o);$(o).addClass(q),$(o).on("click",function(a){var b=$(this);b.hasClass(q)?($(o).addClass(q).removeClass(p),b.removeClass(q).addClass(p)):b.addClass(q).removeClass(p)});var r=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(r)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var s=!1;l.on("click",function(){s?(c(),s=!1):(b(),s=!0)}),k.on("click",function(){s?(c(),s=!1):(b(),s=!0)})}}); \ No newline at end of file +$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu",p="pushy-submenu-open",q="pushy-submenu-closed";$(o);$(o).addClass(q),$(o).on("click",function(){var a=$(this);a.hasClass(q)?($(o).addClass(q).removeClass(p),a.removeClass(q).addClass(p)):a.addClass(q).removeClass(p)});var r=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(r)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var s=!1;l.on("click",function(){s?(c(),s=!1):(b(),s=!0)}),k.on("click",function(){s?(c(),s=!1):(b(),s=!0)})}}); \ No newline at end of file From fb1ab32647b9906239cb33a475056ed511045f79 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Thu, 25 Feb 2016 17:02:06 -0500 Subject: [PATCH 36/48] cleanup --- css/demo.css | 2 +- css/demo.css.map | 2 +- css/pushy.css | 13 +++++-------- css/pushy.css.map | 2 +- scss/demo.scss | 2 +- scss/pushy.scss | 13 +++++-------- 6 files changed, 14 insertions(+), 20 deletions(-) diff --git a/css/demo.css b/css/demo.css index da784ae..a51d717 100644 --- a/css/demo.css +++ b/css/demo.css @@ -38,7 +38,7 @@ ul { background: #000; color: #FFF; width: 100%; - padding: 20px; + padding: 20px 0; text-align: center; z-index: 9998; } diff --git a/css/demo.css.map b/css/demo.css.map index e2403b1..5ada0b7 100644 --- a/css/demo.css.map +++ b/css/demo.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;EAAE,kCAAkC;EAC9E,UAAU,EAAE,MAAM;;;AAGnB,WAAW;AAEX,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGd,eAAe;AAEf,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;AAGlB,iBAAiB;AAEjB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;AAIb,YAAY;AAEZ,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;AAGd,YAAY;AAEZ,YAAY;EACX,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;;AAMb,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", "sources": ["../scss/demo.scss"], "names": [], "file": "demo.css" diff --git a/css/pushy.css b/css/pushy.css index 5815c5b..41a3bf9 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -66,7 +66,9 @@ } /* Menu Transitions */ -.pushy, #container, .push { +#container, +.pushy, +.push { transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); } @@ -123,17 +125,12 @@ width: 8px; position: absolute; top: 50%; - bottom: auto; right: 15px; - background: url("../img/arrow.svg") no-repeat center center; - background-size: 8px 11px; + background: url("../img/arrow.svg") no-repeat; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; + transition: transform 0.2s; } /* Submenu Movement */ diff --git a/css/pushy.css.map b/css/pushy.css.map index 7eb6dad..ae9de7b 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAK3C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;;AAIxB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAKtB,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/demo.scss b/scss/demo.scss index 8e64517..9209723 100644 --- a/scss/demo.scss +++ b/scss/demo.scss @@ -42,7 +42,7 @@ ul{ background: #000; color: #FFF; width: 100%; - padding: 20px; + padding: 20px 0; text-align: center; z-index: 9998; } diff --git a/scss/pushy.scss b/scss/pushy.scss index d1015dd..284d5de 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -81,7 +81,9 @@ $menu_width: 200px; /* Menu Transitions */ -.pushy, #container, .push{ +#container, +.pushy, +.push{ transition: transform .2s cubic-bezier(.16, .68, .43, .99); } @@ -138,17 +140,12 @@ $menu_width: 200px; width: 8px; position: absolute; top: 50%; - bottom: auto; right: 15px; - background: url("../img/arrow.svg") no-repeat center center; - background-size: 8px 11px; + background: url("../img/arrow.svg") no-repeat; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; + transition: transform 0.2s; } } From e487e2cb750b68d63395f1cc3444030fcfb5a42e Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 10:55:31 -0500 Subject: [PATCH 37/48] updated svg --- img/arrow.svg | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/img/arrow.svg b/img/arrow.svg index 5b9b407..4f77c5a 100644 --- a/img/arrow.svg +++ b/img/arrow.svg @@ -1,8 +1,7 @@ - + From fb2ad12e9e01f44e0bec48eee5713796ad2abb85 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 11:00:20 -0500 Subject: [PATCH 38/48] minified SVG --- img/arrow.svg | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/img/arrow.svg b/img/arrow.svg index 4f77c5a..615c66a 100644 --- a/img/arrow.svg +++ b/img/arrow.svg @@ -1,7 +1 @@ - - - - - - +arrow \ No newline at end of file From ef28f5ae2357c57a2006f40cb420a626418bd2f3 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 11:37:33 -0500 Subject: [PATCH 39/48] added submenu toggle fallback jQuery animation --- css/pushy.css | 5 ++++ css/pushy.css.map | 2 +- js/pushy.js | 62 ++++++++++++++++++++++++++++++++--------------- js/pushy.min.js | 2 +- scss/pushy.scss | 9 +++++++ 5 files changed, 58 insertions(+), 22 deletions(-) diff --git a/css/pushy.css b/css/pushy.css index 41a3bf9..9ff7d6f 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -151,4 +151,9 @@ transform: translateY(-50%) rotate(90deg); } +.no-csstransforms3d .pushy-submenu-closed ul { + max-height: none; + display: none; +} + /*# sourceMappingURL=pushy.css.map */ diff --git a/css/pushy.css.map b/css/pushy.css.map index ae9de7b..0826e18 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAK3C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;;AAIxB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAKtB,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B", +"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAK3C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;;AAIxB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAKtB,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B;;;AAMzC,4CAAE;EACE,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/js/pushy.js b/js/pushy.js index 9036aba..3daaeb2 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -29,25 +29,6 @@ $(function() { } } - //hide submenu by default - $(submenuClass).addClass(submenuClosedClass); - - //toggle submenu - $(submenuClass).on('click', function(){ - var selected = $(this); - - if( selected.hasClass(submenuClosedClass) ) { - //hide opened submenus - $(submenuClass).addClass(submenuClosedClass).removeClass(submenuOpenClass); - //show submenu - selected.removeClass(submenuClosedClass).addClass(submenuOpenClass); - }else{ - //hide submenu - selected.addClass(submenuClosedClass).removeClass(submenuOpenClass); - } - - }); - function openPushyFallback(){ //animate menu position based on CSS class @@ -84,6 +65,40 @@ $(function() { } + function toggleSubmenu(){ + //hide submenu by default + $(submenuClass).addClass(submenuClosedClass); + + $(submenuClass).on('click', function(){ + var selected = $(this); + + if( selected.hasClass(submenuClosedClass) ) { + //hide opened submenus + $(submenuClass).addClass(submenuClosedClass).removeClass(submenuOpenClass); + //show submenu + selected.removeClass(submenuClosedClass).addClass(submenuOpenClass); + }else{ + //hide submenu + selected.addClass(submenuClosedClass).removeClass(submenuOpenClass); + } + }); + } + + function toggleSubmenuFallback(){ + //hide submenu by default + $(submenuClass).addClass(submenuClosedClass); + + submenu.children('a').on('click', function(event){ + event.preventDefault(); + $(this).toggleClass(submenuOpenClass) + .next('.pushy-submenu ul').slideToggle(200) + .end().parent(submenuClass) + .siblings(submenuClass).children('a') + .removeClass(submenuOpenClass) + .next('.pushy-submenu ul').slideUp(200); + }); + } + //checks if 3d transforms are supported removing the modernizr dependency var cssTransforms3d = (function csstransforms3d(){ var el = document.createElement('p'), @@ -116,6 +131,9 @@ $(function() { //make menu visible pushy.css({'visibility': 'visible'}); + //toggle submenu + toggleSubmenu(); + //toggle menu menuBtn.on('click', function(){ togglePushy(); @@ -125,7 +143,8 @@ $(function() { togglePushy(); }); }else{ - //jQuery fallback + //add css class to body + body.addClass('no-csstransforms3d'); //hide menu by default if( pushy.hasClass(pushyLeft) ){ @@ -142,6 +161,9 @@ $(function() { //keep track of menu state (open/close) var opened = false; + //toggle submenu + toggleSubmenuFallback(); + //toggle menu menuBtn.on('click', function(){ if (opened) { diff --git a/js/pushy.min.js b/js/pushy.min.js index e9d6154..108b8b1 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){d.hasClass(h)?e.toggleClass(i):e.toggleClass(j)}function b(){d.hasClass(h)?(e.addClass(i),d.animate({left:"0px"},m),f.animate({left:n},m),g.animate({left:n},m)):(e.addClass(j),d.animate({right:"0px"},m),f.animate({right:n},m),g.animate({right:n},m))}function c(){d.hasClass(h)?(e.removeClass(i),d.animate({left:"-"+n},m),f.animate({left:"0px"},m),g.animate({left:"0px"},m)):(e.removeClass(j),d.animate({right:"-"+n},m),f.animate({right:"0px"},m),g.animate({right:"0px"},m))}var d=$(".pushy"),e=$("body"),f=$("#container"),g=$(".push"),h="pushy-left",i="pushy-open-left",j="pushy-open-right",k=$(".site-overlay"),l=$(".menu-btn, .pushy-link"),m=200,n=d.width()+"px",o=".pushy-submenu",p="pushy-submenu-open",q="pushy-submenu-closed";$(o);$(o).addClass(q),$(o).on("click",function(){var a=$(this);a.hasClass(q)?($(o).addClass(q).removeClass(p),a.removeClass(q).addClass(p)):a.addClass(q).removeClass(p)});var r=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(r)d.css({visibility:"visible"}),l.on("click",function(){a()}),k.on("click",function(){a()});else{d.hasClass(h)?d.css({left:"-"+n}):d.css({right:"-"+n}),d.css({visibility:"visible"}),f.css({"overflow-x":"hidden"});var s=!1;l.on("click",function(){s?(c(),s=!1):(b(),s=!0)}),k.on("click",function(){s?(c(),s=!1):(b(),s=!0)})}}); \ No newline at end of file +$(function(){function a(){f.hasClass(j)?g.toggleClass(k):g.toggleClass(l)}function b(){f.hasClass(j)?(g.addClass(k),f.animate({left:"0px"},o),h.animate({left:p},o),i.animate({left:p},o)):(g.addClass(l),f.animate({right:"0px"},o),h.animate({right:p},o),i.animate({right:p},o))}function c(){f.hasClass(j)?(g.removeClass(k),f.animate({left:"-"+p},o),h.animate({left:"0px"},o),i.animate({left:"0px"},o)):(g.removeClass(l),f.animate({right:"-"+p},o),h.animate({right:"0px"},o),i.animate({right:"0px"},o))}function d(){$(q).addClass(s),$(q).on("click",function(){var a=$(this);a.hasClass(s)?($(q).addClass(s).removeClass(r),a.removeClass(s).addClass(r)):a.addClass(s).removeClass(r)})}function e(){$(q).addClass(s),t.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(r).next(".pushy-submenu ul").slideToggle(200).end().parent(q).siblings(q).children("a").removeClass(r).next(".pushy-submenu ul").slideUp(200)})}var f=$(".pushy"),g=$("body"),h=$("#container"),i=$(".push"),j="pushy-left",k="pushy-open-left",l="pushy-open-right",m=$(".site-overlay"),n=$(".menu-btn, .pushy-link"),o=200,p=f.width()+"px",q=".pushy-submenu",r="pushy-submenu-open",s="pushy-submenu-closed",t=$(q),u=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(u)f.css({visibility:"visible"}),d(),n.on("click",function(){a()}),m.on("click",function(){a()});else{g.addClass("no-csstransforms3d"),f.hasClass(j)?f.css({left:"-"+p}):f.css({right:"-"+p}),f.css({visibility:"visible"}),h.css({"overflow-x":"hidden"});var v=!1;e(),n.on("click",function(){v?(c(),v=!1):(b(),v=!0)}),m.on("click",function(){v?(c(),v=!1):(b(),v=!0)})}}); \ No newline at end of file diff --git a/scss/pushy.scss b/scss/pushy.scss index 284d5de..9973b77 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -171,3 +171,12 @@ $menu_width: 200px; transform: translateY(-50%) rotate(90deg); } } + +.no-csstransforms3d{ + .pushy-submenu-closed{ + ul{ + max-height: none; + display: none; + } + } +} From 63d12ee82b01f2de55813f418cbc6ebc22274709 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 11:59:21 -0500 Subject: [PATCH 40/48] added position relative to site-footer --- css/demo.css | 1 + css/demo.css.map | 2 +- scss/demo.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/css/demo.css b/css/demo.css index a51d717..f4c60f7 100644 --- a/css/demo.css +++ b/css/demo.css @@ -45,6 +45,7 @@ ul { /* Footer */ .site-footer { + position: relative; border-top: 1px solid #EEE; color: #999; padding: 10px; diff --git a/css/demo.css.map b/css/demo.css.map index 5ada0b7..3519329 100644 --- a/css/demo.css.map +++ b/css/demo.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;;AAMb,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;;AAMb,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", "sources": ["../scss/demo.scss"], "names": [], "file": "demo.css" diff --git a/scss/demo.scss b/scss/demo.scss index 9209723..56f6d11 100644 --- a/scss/demo.scss +++ b/scss/demo.scss @@ -50,6 +50,7 @@ ul{ /* Footer */ .site-footer{ + position: relative; border-top: 1px solid #EEE; color: #999; padding: 10px; From dc5246fd0bf8281f3603bf1d8fbc8e6a32f9997d Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 12:20:06 -0500 Subject: [PATCH 41/48] updated README --- README.md | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 007b914..1fb074a 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Pushy has been implemented on many sites, [check them out!](https://github.com/c - jQuery animation fallback for IE 7 - 9. - Menu closes when a link is selected. - Menu closes when the site overlay is selected. -- Collapsible submenus. +- Auto-collapsible submenus. - Left or right menu position. - It's responsive! @@ -67,15 +67,6 @@ If your are comfortable with command line, you can install Pushy as a [Bower](ht bower install pushy ``` -##Grunt - -You can use the default Grunt task to watch and compile the SCSS and JS files. Don't forget to run ```npm install``` beforehand to install the dependencies. - -``` -npm install -grunt -``` - ##Tips - Use the ```.pushy-left``` or ```.pushy-right``` CSS class to specify the menu position. @@ -167,12 +158,26 @@ html, body{ | Desktop | Mobile | | ------------- | -------------------------------------------| | IE 9-11 | Chrome (Android 4.x+) | -| Chrome | Safari (iOS 9) | +| MS Edge | Safari (iOS 9) | +| Chrome | | Firefox | | Safari (Mac) | ##Version History +1.0.0 + +- Added auto-collapsable submenus. +- Added ```.pushy-right``` CSS class for right sided menu position. +- Added SCSS files. +- Added menu width SCSS variable. +- Updated click event listeners. +- Updated demo file. +- Updated browser compatibility. +- Removed unneeded CSS browser prefixes. +- Consolidated menu state CSS classes. +- Fixed brief menu visibility. + 0.9.2 - Removed modernizr dependency. From 164dcf57c0f287f20c0938519993e5b2fd0756a9 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 12:20:16 -0500 Subject: [PATCH 42/48] version bump --- bower.json | 2 +- css/pushy.css | 2 +- js/pushy.js | 2 +- package.json | 2 +- scss/pushy.scss | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bower.json b/bower.json index 2d0a1dd..c395992 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "pushy", - "version": "0.9.2", + "version": "1.0.0", "homepage": "https://github.com/christophery/pushy", "authors": [ "christophery <@cmyee>" diff --git a/css/pushy.css b/css/pushy.css index 9ff7d6f..a3b8268 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -1,4 +1,4 @@ -/*! Pushy - v0.9.2 - 2014-9-13 +/*! Pushy - v1.0.0 - 2016-3-1 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ diff --git a/js/pushy.js b/js/pushy.js index 3daaeb2..af6a3a6 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -1,4 +1,4 @@ -/*! Pushy - v0.9.2 - 2014-9-13 +/*! Pushy - v1.0.0 - 2016-3-1 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ diff --git a/package.json b/package.json index 2cc0390..e2e0e2e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "Pushy", "description": "Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions", - "version": "0.9.2", + "version": "1.0.0", "homepage": "http://www.christopheryee.ca/pushy/", "author": { "name": "Christopher Yee", diff --git a/scss/pushy.scss b/scss/pushy.scss index 9973b77..8714e56 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -1,4 +1,4 @@ -/*! Pushy - v0.9.2 - 2014-9-13 +/*! Pushy - v1.0.0 - 2016-3-1 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. * https://github.com/christophery/pushy/ * by Christopher Yee */ From 3911b6544df4c060e7b0292cc3f936a96311afd3 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 13:08:03 -0500 Subject: [PATCH 43/48] added quick fade-in transition for submenu links --- css/pushy.css | 9 +++++++++ css/pushy.css.map | 2 +- scss/pushy.scss | 12 ++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/css/pushy.css b/css/pushy.css index a3b8268..49ac0a5 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -115,6 +115,9 @@ padding-left: 15px; transition: max-height 0.2s ease-in-out; } +.pushy-submenu ul .pushy-link { + transition: opacity 0.2s ease-in-out; +} .pushy-submenu > a { position: relative; } @@ -138,6 +141,9 @@ max-height: 0; overflow: hidden; } +.pushy-submenu-closed .pushy-link { + opacity: 0; +} .pushy-submenu-open { /* Submenu Icon */ @@ -145,6 +151,9 @@ .pushy-submenu-open ul { max-height: 1000px; } +.pushy-submenu-open .pushy-link { + opacity: 1; +} .pushy-submenu-open a::after { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); diff --git a/css/pushy.css.map b/css/pushy.css.map index 0826e18..06b0df4 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAK3C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;;AAIxB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAKtB,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B;;;AAMzC,4CAAE;EACE,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI", +"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAEvC,6BAAW;EACP,UAAU,EAAE,wBAAwB;;AAM5C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;AAGpB,iCAAW;EACP,OAAO,EAAE,CAAC;;;AAIlB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAGtB,+BAAW;EACP,OAAO,EAAE,CAAC;;AAKd,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B;;;AAMzC,4CAAE;EACE,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/pushy.scss b/scss/pushy.scss index 8714e56..cba33fc 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -125,6 +125,10 @@ $menu_width: 200px; ul{ padding-left: 15px; transition: max-height 0.2s ease-in-out; + + .pushy-link{ + transition: opacity 0.2s ease-in-out; + } } /* Submenu Icon */ @@ -156,12 +160,20 @@ $menu_width: 200px; max-height: 0; overflow: hidden; } + + .pushy-link{ + opacity: 0; + } } .pushy-submenu-open{ ul{ max-height: 1000px; } + + .pushy-link{ + opacity: 1; + } /* Submenu Icon */ From e49a8cd162c6dab21a5cab3191d5a838a2215c0c Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 15:23:18 -0500 Subject: [PATCH 44/48] wrapped js in an anonymous JavaScript function --- js/pushy.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/pushy.js b/js/pushy.js index af6a3a6..dcb25e7 100644 --- a/js/pushy.js +++ b/js/pushy.js @@ -3,7 +3,7 @@ * https://github.com/christophery/pushy/ * by Christopher Yee */ -$(function() { +(function ($) { var pushy = $('.pushy'), //menu css class body = $('body'), container = $('#container'), //container css class @@ -127,7 +127,6 @@ $(function() { })(); if(cssTransforms3d){ - //if(false){ //make menu visible pushy.css({'visibility': 'visible'}); @@ -186,4 +185,4 @@ $(function() { } }); } -}); \ No newline at end of file +}(jQuery)); \ No newline at end of file From 0667448ff0ee57a1745d446f8c4ac346af866b0e Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 15:25:01 -0500 Subject: [PATCH 45/48] cleanup --- js/pushy.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/pushy.min.js b/js/pushy.min.js index 108b8b1..087f1b8 100644 --- a/js/pushy.min.js +++ b/js/pushy.min.js @@ -1 +1 @@ -$(function(){function a(){f.hasClass(j)?g.toggleClass(k):g.toggleClass(l)}function b(){f.hasClass(j)?(g.addClass(k),f.animate({left:"0px"},o),h.animate({left:p},o),i.animate({left:p},o)):(g.addClass(l),f.animate({right:"0px"},o),h.animate({right:p},o),i.animate({right:p},o))}function c(){f.hasClass(j)?(g.removeClass(k),f.animate({left:"-"+p},o),h.animate({left:"0px"},o),i.animate({left:"0px"},o)):(g.removeClass(l),f.animate({right:"-"+p},o),h.animate({right:"0px"},o),i.animate({right:"0px"},o))}function d(){$(q).addClass(s),$(q).on("click",function(){var a=$(this);a.hasClass(s)?($(q).addClass(s).removeClass(r),a.removeClass(s).addClass(r)):a.addClass(s).removeClass(r)})}function e(){$(q).addClass(s),t.children("a").on("click",function(a){a.preventDefault(),$(this).toggleClass(r).next(".pushy-submenu ul").slideToggle(200).end().parent(q).siblings(q).children("a").removeClass(r).next(".pushy-submenu ul").slideUp(200)})}var f=$(".pushy"),g=$("body"),h=$("#container"),i=$(".push"),j="pushy-left",k="pushy-open-left",l="pushy-open-right",m=$(".site-overlay"),n=$(".menu-btn, .pushy-link"),o=200,p=f.width()+"px",q=".pushy-submenu",r="pushy-submenu-open",s="pushy-submenu-closed",t=$(q),u=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(u)f.css({visibility:"visible"}),d(),n.on("click",function(){a()}),m.on("click",function(){a()});else{g.addClass("no-csstransforms3d"),f.hasClass(j)?f.css({left:"-"+p}):f.css({right:"-"+p}),f.css({visibility:"visible"}),h.css({"overflow-x":"hidden"});var v=!1;e(),n.on("click",function(){v?(c(),v=!1):(b(),v=!0)}),m.on("click",function(){v?(c(),v=!1):(b(),v=!0)})}}); \ No newline at end of file +!function(a){function b(){g.hasClass(k)?h.toggleClass(l):h.toggleClass(m)}function c(){g.hasClass(k)?(h.addClass(l),g.animate({left:"0px"},p),i.animate({left:q},p),j.animate({left:q},p)):(h.addClass(m),g.animate({right:"0px"},p),i.animate({right:q},p),j.animate({right:q},p))}function d(){g.hasClass(k)?(h.removeClass(l),g.animate({left:"-"+q},p),i.animate({left:"0px"},p),j.animate({left:"0px"},p)):(h.removeClass(m),g.animate({right:"-"+q},p),i.animate({right:"0px"},p),j.animate({right:"0px"},p))}function e(){a(r).addClass(t),a(r).on("click",function(){var b=a(this);b.hasClass(t)?(a(r).addClass(t).removeClass(s),b.removeClass(t).addClass(s)):b.addClass(t).removeClass(s)})}function f(){a(r).addClass(t),u.children("a").on("click",function(b){b.preventDefault(),a(this).toggleClass(s).next(".pushy-submenu ul").slideToggle(200).end().parent(r).siblings(r).children("a").removeClass(s).next(".pushy-submenu ul").slideUp(200)})}var g=a(".pushy"),h=a("body"),i=a("#container"),j=a(".push"),k="pushy-left",l="pushy-open-left",m="pushy-open-right",n=a(".site-overlay"),o=a(".menu-btn, .pushy-link"),p=200,q=g.width()+"px",r=".pushy-submenu",s="pushy-submenu-open",t="pushy-submenu-closed",u=a(r),v=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var d in c)void 0!==a.style[d]&&(a.style[d]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[d]));return document.body.removeChild(a),void 0!==b&&b.length>0&&"none"!==b}();if(v)g.css({visibility:"visible"}),e(),o.on("click",function(){b()}),n.on("click",function(){b()});else{h.addClass("no-csstransforms3d"),g.hasClass(k)?g.css({left:"-"+q}):g.css({right:"-"+q}),g.css({visibility:"visible"}),i.css({"overflow-x":"hidden"});var w=!1;f(),o.on("click",function(){w?(d(),w=!1):(c(),w=!0)}),n.on("click",function(){w?(d(),w=!1):(c(),w=!0)})}}(jQuery); \ No newline at end of file From 2f347690c35cbe32fd85c3a0a32f3ce4b20f7468 Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 15:27:30 -0500 Subject: [PATCH 46/48] removed outline from links --- css/pushy.css | 1 + css/pushy.css.map | 2 +- scss/pushy.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/css/pushy.css b/css/pushy.css index 49ac0a5..c15648a 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -20,6 +20,7 @@ color: #b3b3b1; padding: 15px 30px; text-decoration: none; + outline: 0; } .pushy a:hover { color: #FFF; diff --git a/css/pushy.css.map b/css/pushy.css.map index 06b0df4..311c646 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;;AAGzB,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAEvC,6BAAW;EACP,UAAU,EAAE,wBAAwB;;AAM5C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;AAGpB,iCAAW;EACP,OAAO,EAAE,CAAC;;;AAIlB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAGtB,+BAAW;EACP,OAAO,EAAE,CAAC;;AAKd,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B;;;AAMzC,4CAAE;EACE,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI", +"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,CAAC;;AAGd,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAEvC,6BAAW;EACP,UAAU,EAAE,wBAAwB;;AAM5C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;AAGpB,iCAAW;EACP,OAAO,EAAE,CAAC;;;AAIlB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAGtB,+BAAW;EACP,OAAO,EAAE,CAAC;;AAKd,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B;;;AAMzC,4CAAE;EACE,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/pushy.scss b/scss/pushy.scss index cba33fc..5585dbe 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -23,6 +23,7 @@ $menu_width: 200px; color: #b3b3b1; padding: 15px 30px; text-decoration: none; + outline: 0; } a:hover{ From c8750464a6a3e5c3062e6375785bf14b24421fcd Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 16:14:33 -0500 Subject: [PATCH 47/48] changed menu button hover --- css/demo.css | 3 +-- css/demo.css.map | 2 +- scss/demo.scss | 3 +-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/css/demo.css b/css/demo.css index f4c60f7..ea9b116 100644 --- a/css/demo.css +++ b/css/demo.css @@ -28,8 +28,7 @@ ul { cursor: pointer; } .menu-btn:hover { - background: #00b4ff; - color: #FFF; + opacity: 0.6; } /* Header */ diff --git a/css/demo.css.map b/css/demo.css.map index 3519329..5a9368f 100644 --- a/css/demo.css.map +++ b/css/demo.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;;;;AAMb,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,OAAO,EAAE,GAAG;;;;AAMd,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", "sources": ["../scss/demo.scss"], "names": [], "file": "demo.css" diff --git a/scss/demo.scss b/scss/demo.scss index 56f6d11..87397ae 100644 --- a/scss/demo.scss +++ b/scss/demo.scss @@ -30,8 +30,7 @@ ul{ cursor: pointer; &:hover{ - background: #00b4ff; - color: #FFF; + opacity: 0.6; } } From b638fc540f577eae0e7b217632921fa8bf58a63f Mon Sep 17 00:00:00 2001 From: Christopher Yee Date: Tue, 1 Mar 2016 19:32:34 -0500 Subject: [PATCH 48/48] added css for pushy-left --- css/demo.css.map | 2 +- css/pushy.css | 3 +++ css/pushy.css.map | 2 +- scss/pushy.scss | 4 ++++ 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/css/demo.css.map b/css/demo.css.map index 5a9368f..80c58a3 100644 --- a/css/demo.css.map +++ b/css/demo.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;;EAC1C,UAAU,EAAE,MAAM;;;;AAKnB,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;;AAKd,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;;AAKlB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,OAAO,EAAE,GAAG;;;;AAMd,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;;AAKd,YAAY;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", +"mappings": "AAAA,UAAU;EACT,2BAA2B,EAAE,WAAa;EAAE,kCAAkC;EAC9E,UAAU,EAAE,MAAM;;;AAGnB,WAAW;AAEX,EAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGd,eAAe;AAEf,UAAU;EACT,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,WAAW,EAAE,IAAI;;;AAGlB,iBAAiB;AAEjB,SAAS;EACR,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,OAAO;;AAEf,eAAO;EACN,OAAO,EAAE,GAAG;;;AAId,YAAY;AAEZ,YAAY;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;;;AAGd,YAAY;AAEZ,YAAY;EACX,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,cAAc;EAC1B,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM", "sources": ["../scss/demo.scss"], "names": [], "file": "demo.css" diff --git a/css/pushy.css b/css/pushy.css index c15648a..fe33ae8 100644 --- a/css/pushy.css +++ b/css/pushy.css @@ -28,6 +28,9 @@ .pushy ul:first-child { margin-top: 10px; } +.pushy.pushy-left { + left: 0; +} .pushy.pushy-right { right: 0; } diff --git a/css/pushy.css.map b/css/pushy.css.map index 311c646..52b89a3 100644 --- a/css/pushy.css.map +++ b/css/pushy.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": ";;;;;AASA,MAAM;EACF,QAAQ,EAAE,KAAK;EACf,KAAK,EANI,KAAK;EAOd,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,CAAC;EACN,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,IAAI;EACd,UAAU,EAAE,MAAM;EAClB,0BAA0B,EAAE,KAAK;;;AAEjC,QAAC;EACG,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,CAAC;;AAGd,cAAO;EACH,KAAK,EAAE,IAAI;;AAGf,qBAAc;EACV,UAAU,EAAE,IAAI;;AAGpB,kBAAa;EACT,KAAK,EAAE,CAAC;;;;AAMhB,WAAW;EACP,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAIxD;sBACK;EACD,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIjD,YAAY;EACR,iBAAiB,EAAE,wBAA8B;EACjD,aAAa,EAAE,wBAA8B;EAC7C,SAAS,EAAE,wBAA8B;;;AAIzC;uBACK;EACD,iBAAiB,EAAE,yBAA6C;EAChE,aAAa,EAAE,yBAA6C;EAC5D,SAAS,EAAE,yBAA6C;;;AAM5D;wBAAM;EACF,iBAAiB,EAAE,oBAAkB;EACrC,aAAa,EAAE,oBAAkB;EACjC,SAAS,EAAE,oBAAkB;;;;AAMrC;;KAEK;EACD,UAAU,EAAE,mDAA8C;;;;AAK9D,aAAa;EACT,OAAO,EAAE,IAAI;;;AAKb;+BAAa;EACT,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,kBAAe;EACjC,iBAAiB,EAAE,UAAU;EAC7B,SAAS,EAAE,UAAU;;;AAI7B,eAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;AAGrB,uBAGC;EAFG,EAAK;IAAE,OAAO,EAAE,CAAC;;EACjB,IAAK;IAAE,OAAO,EAAE,CAAC;;;;AAKrB,cAAc;;;AACV,iBAAE;EACE,YAAY,EAAE,IAAI;EAClB,UAAU,EAAE,2BAA2B;;AAEvC,6BAAW;EACP,UAAU,EAAE,wBAAwB;;AAM5C,kBAAI;EACA,QAAQ,EAAE,QAAQ;;AAGtB,yBAAW;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,iCAAiC;EAC7C,iBAAiB,EAAE,gBAAgB;EACnC,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,UAAU,EAAE,cAAc;;;;AAO9B,wBAAE;EACE,UAAU,EAAE,CAAC;EACb,QAAQ,EAAE,MAAM;;AAGpB,iCAAW;EACP,OAAO,EAAE,CAAC;;;AAIlB,mBAAmB;;;AACf,sBAAE;EACE,UAAU,EAAE,MAAM;;AAGtB,+BAAW;EACP,OAAO,EAAE,CAAC;;AAKd,4BAAS;EACL,iBAAiB,EAAE,8BAA8B;EACjD,aAAa,EAAE,8BAA8B;EAC7C,SAAS,EAAE,8BAA8B;;;AAMzC,4CAAE;EACE,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI", +"mappings": "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", "sources": ["../scss/pushy.scss"], "names": [], "file": "pushy.css" diff --git a/scss/pushy.scss b/scss/pushy.scss index 5585dbe..3d12cf1 100644 --- a/scss/pushy.scss +++ b/scss/pushy.scss @@ -34,6 +34,10 @@ $menu_width: 200px; margin-top: 10px; } + &.pushy-left{ + left: 0; + } + &.pushy-right{ right: 0; }