Merge pull request #138 from christophery/jquery3.0

jquery3.0

Gruntfile.js

@@ -6,6 +6,7 @@ module.exports = function(grunt) {
     watch: {
       options: {
         livereload: true,
+        spawn: false
       },
       css: {
         files: ['scss/*.scss'],
@@ -29,26 +30,27 @@ module.exports = function(grunt) {
         },
     },
     uglify: {
-        build: {
-          src: 'js/pushy.min.js',
-          dest: 'js/pushy.min.js'
+        dist: {
+          files: {
+              'js/pushy.min.js': 'js/pushy.min.js'
+          }
         }
     },
-    sass: {                              
-      dist: {                          
+    sass: {
+      dist: {
         options: {
-          style: 'expanded' //output style: nested, compact, compressed, expanded
+          outputStyle: 'expanded' //output style: nested, compact, compressed, expanded
         },
-        files: {                         
+        files: {
           'css/pushy.css': 'scss/pushy.scss', // 'destination': 'source'
           'css/demo.css': 'scss/demo.scss'
         }
       }
     }
   });
-  
+
   // Load grunt plugins
-  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-concat');

README.md

@@ -2,11 +2,11 @@
 
 Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. This project was inspired by the off-canvas navigation menu seen on [Medium](https://medium.com/).
 
-Pushy has been implemented on many sites, [check them out!](https://github.com/christophery/pushy#sites-using-pushy) Feel free to [let me know](http://www.twitter.com/cmyee) if you use Pushy in one of your websites.
+Pushy has been implemented on many sites, [check them out!](https://chrisyee.ca/pushy/#sites-using-pushy) Feel free to [let me know](http://www.twitter.com/cmyee) if you use Pushy in one of your websites.
 
 Pushy has been featured on the [Treehouse Show](https://teamtreehouse.com/library/episode-118-page-transitions-designing-for-thumbs-concise) and in a [book](https://books.google.ca/books?id=guZjBAAAQBAJ&pg=PA103&lpg=PA103&dq=christopheryee.ca/pushy&source=bl&ots=1x-sSNmTHD&sig=ACfU3U1sFn-MU9bs3ia1UU0d9aNga5rB6w&hl=en&sa=X&ved=2ahUKEwi5wfKP9tnhAhUJbKwKHdbfBXAQ6AEwBnoECAoQAQ#v=onepage&q&f=false)!
 
-[View Demo](https://chrisyee.ca/pushy) | [Sites using Pushy](https://github.com/christophery/pushy#sites-using-pushy)
+[View Demo](https://chrisyee.ca/pushy) | [Sites using Pushy](https://chrisyee.ca/pushy/#sites-using-pushy)
 
 ## Features
 
@@ -21,7 +21,7 @@ Pushy has been featured on the [Treehouse Show](https://teamtreehouse.com/librar
 
 ## Requirements
 
-- [jQuery 1.12+](http://jquery.com/)
+- [jQuery 3.x+](https://jquery.com/)
 
 ## Install
 
@@ -124,24 +124,38 @@ This data attribute accepts a CSS selector.
 </nav>
 ```
 
-### data-menu-btn-class
+### data-menu-btn-selector
 
-Use the `data-menu-btn-class` attribute to change the menu button CSS class for toggling the menu.
+Use the `data-menu-btn-selector` attribute to change the menu button CSS class for toggling the menu.
 
 By default Pushy will use `.menu-btn` to toggle the menu.
 
 This data attribute accepts a CSS selector.
 
+**Note:** In v1.4.0 this attribute was renamed from `data-menu-btn-class` to `data-menu-btn-selector`
+
 ```html
 <!-- Pushy Menu -->
-<nav class="pushy pushy-left" data-menu-btn-class=".my-menu-btn">
+<nav class="pushy pushy-left" data-menu-btn-selector=".my-menu-btn">
 	<!-- I've removed the inner markup for brevity -->
 </nav>
 
 <!-- Menu Button-->
 <button class="my-menu-btn">Menu</button>
 ```
 
+### data-container-selector
+
+Use the `data-container-selector` attribute to using a custom `#container` selector.
+
+If you use a custom `#container` selector you'll need to update the necessary CSS in `pushy.scss`.
+
+This data attribute accepts a CSS selector.
+
+```
+<nav class="pushy pushy-right" data-container-selector="#custom-container">
+```
+
 ## Tips
 
 - Use the ```.push``` CSS class on HTML elements outside of the ```#container```.
@@ -229,105 +243,10 @@ html, body{
 | Firefox       | 
 | Safari (Mac)  |
 
-## Version History
-
-1.3.0
-
-- Added the `data-menu-btn-class` attribute [#131](https://github.com/christophery/pushy/issues/131)
-- Updated README.md with Development, NPM and Options sections.
-
-1.2.0
-
-- Added support for a 3rd level submenu [#129](https://github.com/christophery/pushy/pull/129)
-- Removed bower.json
-- Updated demo
-
-1.1.2
-
-- Fixed formatting issues in README.md
-- Added repository + license to package.json
-
-1.1.1
-
-- Published package to NPM.
-- Removed Bower support.
-- Updated demo & personal site links.
-
-1.1.0
-
-- Accessiblity (a11y) enhancements:
-   - Can access and use menu with keyboard navigation.
-   - Can use the escape key to close the menu when opened.
-   - Changed the empty submenu links to buttons.
-   - Added `data-focus` attribute to allow user to specify a link to focus on when menu is opened.
-   - Added `.pushy-content` element to menu structure (fixes visibility flickering).
-   - Changed `.menu-btn` div to button.
-
-- Removed some redundant CSS classes from `pushy.css`.
-- Removed `toggleSubmenuFallback` function, older browsers will use `toggleSubmenu` instead.
-- Fixed issue #88
-
-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.
-- Updated site overlay with color + smoother transition.
-- Cleaned up the CSS a bit.
-- Dropped support for IE 7 & 8.
-
-0.9.1
-
-- Added support for more menu items (with scroll bar).
-- Added the .push CSS class. This adds pushy support to additional HTML elements outside of the container div.
-- Fixed menu transition.
-- Tested in iOS 7.
-- Updated the demo file.
-
-0.9.0
-
-- Added a site overlay when Pushy is toggled
-- Fixed horizontal scroll bar issue on mobile devices
-- Disabled webkit tap highlight
-- Rejiggered the JS file
-- Updated to jQuery 1.10.1
-- Updated the demo file
-
-0.8.4
-
-- Fixed performance issue with mobile devices
-- Updated to jQuery 1.10
-- Updated the demo file
-- Updated the read me
 
 ## Sites using Pushy
 
-Pushy has been implemented on many sites in the wild, check them out:
-
-- [Lela Design](http://leladesign.hr/) by [@div3rDesign](https://twitter.com/div3rDesign)
-- [emota](http://www.emota.com) by [@YayRomina](https://twitter.com/YayRomina)
-- [Selby College](http://www.selby.ac.uk/) by [@welcomebrand](https://twitter.com/welcomebrand)
-- [Bentleys Estate and Lettings Agents](http://www.bentleysestateagents.co.uk/) by [@WolfHook](https://twitter.com/WolfHook)
-- [Firefox OS Devices](https://firefoxosdevices.org/) by [@s_hentzschel](https://twitter.com/s_hentzschel)
-- [FulcrumTech](http://www.fulcrumtech.net/) by [@maxlapides](https://twitter.com/maxlapides)
-- [The Black and Blue](http://www.theblackandblue.com/) by [@evanluzi](https://github.com/evanluzi)
-
-**Note:** You may have to resize your browser on some sites to see Pushy in action.
+Pushy has been implemented on many sites in the wild, [check them out!](https://chrisyee.ca/pushy/#sites-using-pushy)
 
 To add your site, tweet to me [@cmyee](https://twitter.com/cmyee).
 
-## Thanks to
-
-- [HTML5 Boilerplate](http://html5boilerplate.com/)
-- [jQuery](http://jquery.com/)

css/demo.css

@@ -26,6 +26,7 @@ ul {
   cursor: pointer;
   border: 0px;
 }
+
 .menu-btn:hover {
   opacity: 0.6;
 }
@@ -50,5 +51,3 @@ ul {
   font-size: 0.8em;
   text-align: center;
 }
-
-/*# sourceMappingURL=demo.css.map */

css/pushy.css

@@ -1,4 +1,4 @@
-/*! Pushy - v1.3.0 - 2019-6-25
+/*! Pushy - v1.4.0 - 2020-12-28
 * Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
 * https://github.com/christophery/pushy/
 * by Christopher Yee */
@@ -14,21 +14,26 @@
   -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;
 }
+
 .pushy.pushy-left {
   left: 0;
 }
+
 .pushy.pushy-right {
   right: 0;
 }
@@ -70,6 +75,7 @@
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
+
 .pushy-open-left .pushy-content,
 .pushy-open-right .pushy-content {
   visibility: visible;
@@ -113,6 +119,7 @@
     opacity: 1;
   }
 }
+
 @-webkit-keyframes fade {
   0% {
     opacity: 0;
@@ -121,18 +128,22 @@
     opacity: 1;
   }
 }
+
 /* Submenu Appearance */
 .pushy-submenu {
   /* Submenu Buttons */
   /* Submenu Icon */
 }
+
 .pushy-submenu > ul {
   padding-left: 15px;
   transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out;
 }
+
 .pushy-submenu > ul .pushy-link {
   transition: opacity 0.2s ease-in-out;
 }
+
 .pushy-submenu button {
   width: 100%;
   color: #b3b3b1;
@@ -141,13 +152,16 @@
   background: transparent;
   border: 0;
 }
+
 .pushy-submenu button:hover {
   color: #FFF;
 }
+
 .pushy-submenu > a,
 .pushy-submenu > button {
   position: relative;
 }
+
 .pushy-submenu > a::after,
 .pushy-submenu > button::after {
   content: '';
@@ -170,25 +184,27 @@
   overflow: hidden;
   visibility: hidden;
 }
+
 .pushy-submenu-closed .pushy-link {
   opacity: 0;
 }
 
 .pushy-submenu-open {
   /* Submenu Icon */
 }
+
 .pushy-submenu-open > ul {
   max-height: 1000px;
   visibility: visible;
 }
+
 .pushy-submenu-open .pushy-link {
   opacity: 1;
 }
+
 .pushy-submenu-open > a::after,
 .pushy-submenu-open > button::after {
   -webkit-transform: translateY(-50%) rotate(90deg);
   -ms-transform: translateY(-50%) rotate(90deg);
   transform: translateY(-50%) rotate(90deg);
 }
-
-/*# sourceMappingURL=pushy.css.map */

demo.html

@@ -13,7 +13,7 @@
         <link rel="stylesheet" href="css/pushy.css">
 
         <!-- jQuery -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     </head>
     <body>