-
+
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra neque a diam cursus pulvinar. Suspendisse faucibus mi id accumsan lobortis. Pellentesque consectetur varius turpis, nec viverra justo pellentesque sit amet. Vestibulum convallis leo non purus vehicula, non faucibus libero rhoncus. Morbi aliquam tincidunt facilisis. Aenean sodales nulla ac semper consectetur. Vivamus commodo massa convallis justo posuere vestibulum. Aenean congue non mauris ac auctor. Ut suscipit et eros nec suscipit. Nulla congue, mauris nec bibendum sagittis, urna orci tincidunt massa, in vulputate velit nulla vitae nunc. Etiam urna justo, imperdiet nec orci sollicitudin, tempus feugiat erat. Vivamus id lectus nulla. Vestibulum sagittis cursus metus vel ultricies. Suspendisse viverra interdum metus eu placerat. Quisque tristique velit nisi, scelerisque consectetur tortor vehicula ut. Donec id fermentum mi, nec venenatis felis.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra neque a diam cursus pulvinar. Suspendisse faucibus mi id accumsan lobortis. Pellentesque consectetur varius turpis, nec viverra justo pellentesque sit amet. Vestibulum convallis leo non purus vehicula, non faucibus libero rhoncus. Morbi aliquam tincidunt facilisis. Aenean sodales nulla ac semper consectetur. Vivamus commodo massa convallis justo posuere vestibulum. Aenean congue non mauris ac auctor. Ut suscipit et eros nec suscipit. Nulla congue, mauris nec bibendum sagittis, urna orci tincidunt massa, in vulputate velit nulla vitae nunc. Etiam urna justo, imperdiet nec orci sollicitudin, tempus feugiat erat. Vivamus id lectus nulla. Vestibulum sagittis cursus metus vel ultricies. Suspendisse viverra interdum metus eu placerat. Quisque tristique velit nisi, scelerisque consectetur tortor vehicula ut. Donec id fermentum mi, nec venenatis felis.
Praesent id metus imperdiet, congue leo sed, eleifend purus. Donec congue scelerisque tempus. Maecenas eget nunc pharetra, laoreet enim sed, dictum odio. Sed non mollis purus. Aliquam aliquet, risus eget dictum commodo, neque mi dapibus ipsum, tempus iaculis elit lorem pharetra mauris. Vivamus pulvinar scelerisque lectus a congue. Sed vitae odio massa. Pellentesque condimentum sit amet arcu in convallis.
-
Etiam dapibus nisl nibh, et commodo nisi euismod vehicula. In consectetur eleifend felis, eget iaculis lectus scelerisque vel. Mauris non nibh nec sem consequat dapibus sed at tellus. Nunc egestas ac diam sed pretium. Praesent ultrices malesuada nisi at ornare. Aliquam arcu eros, pellentesque vitae fringilla ac, rhoncus id urna. Curabitur sit amet tortor eu neque sollicitudin congue. Proin mattis, diam quis ullamcorper iaculis, metus lectus vulputate tellus, id imperdiet nibh ante vel risus. Nam ut mi libero. Suspendisse auctor neque at pulvinar vestibulum. Suspendisse potenti. Cras molestie eros at feugiat gravida.
+
Etiam dapibus nisl nibh, et commodo nisi euismod vehicula. In consectetur eleifend felis, eget iaculis lectus scelerisque vel. Mauris non nibh nec sem consequat dapibus sed at tellus. Nunc egestas ac diam sed pretium. Praesent ultrices malesuada nisi at ornare. Aliquam arcu eros, pellentesque vitae fringilla ac, rhoncus id urna. Curabitur sit amet tortor eu neque sollicitudin congue. Proin mattis, diam quis ullamcorper iaculis, metus lectus vulputate tellus, id imperdiet nibh ante vel risus. Nam ut mi libero. Suspendisse auctor neque at pulvinar vestibulum. Suspendisse potenti. Cras molestie eros at feugiat gravida.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra neque a diam cursus pulvinar. Suspendisse faucibus mi id accumsan lobortis. Pellentesque consectetur varius turpis, nec viverra justo pellentesque sit amet. Vestibulum convallis leo non purus vehicula, non faucibus libero rhoncus. Morbi aliquam tincidunt facilisis. Aenean sodales nulla ac semper consectetur. Vivamus commodo massa convallis justo posuere vestibulum. Aenean congue non mauris ac auctor. Ut suscipit et eros nec suscipit. Nulla congue, mauris nec bibendum sagittis, urna orci tincidunt massa, in vulputate velit nulla vitae nunc. Etiam urna justo, imperdiet nec orci sollicitudin, tempus feugiat erat. Vivamus id lectus nulla. Vestibulum sagittis cursus metus vel ultricies. Suspendisse viverra interdum metus eu placerat. Quisque tristique velit nisi, scelerisque consectetur tortor vehicula ut. Donec id fermentum mi, nec venenatis felis.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra neque a diam cursus pulvinar. Suspendisse faucibus mi id accumsan lobortis. Pellentesque consectetur varius turpis, nec viverra justo pellentesque sit amet. Vestibulum convallis leo non purus vehicula, non faucibus libero rhoncus. Morbi aliquam tincidunt facilisis. Aenean sodales nulla ac semper consectetur. Vivamus commodo massa convallis justo posuere vestibulum. Aenean congue non mauris ac auctor. Ut suscipit et eros nec suscipit. Nulla congue, mauris nec bibendum sagittis, urna orci tincidunt massa, in vulputate velit nulla vitae nunc. Etiam urna justo, imperdiet nec orci sollicitudin, tempus feugiat erat. Vivamus id lectus nulla. Vestibulum sagittis cursus metus vel ultricies. Suspendisse viverra interdum metus eu placerat. Quisque tristique velit nisi, scelerisque consectetur tortor vehicula ut. Donec id fermentum mi, nec venenatis felis.
Praesent id metus imperdiet, congue leo sed, eleifend purus. Donec congue scelerisque tempus. Maecenas eget nunc pharetra, laoreet enim sed, dictum odio. Sed non mollis purus. Aliquam aliquet, risus eget dictum commodo, neque mi dapibus ipsum, tempus iaculis elit lorem pharetra mauris. Vivamus pulvinar scelerisque lectus a congue. Sed vitae odio massa. Pellentesque condimentum sit amet arcu in convallis.
diff --git a/js/pushy.js b/js/pushy.js
index dcb25e7..729bb2a 100644
--- a/js/pushy.js
+++ b/js/pushy.js
@@ -1,4 +1,4 @@
-/*! Pushy - v1.0.0 - 2016-3-1
+/*! Pushy - v1.1.0 - 2017-1-30
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
@@ -13,6 +13,8 @@
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
+ menuBtnFocus = $('.menu-btn'), //css class to focus when menu is closed w/ esc key
+ menuLinkFocus = $(pushy.data('focus')), //focus on link when menu is open
menuSpeed = 200, //jQuery fallback menu speed
menuWidth = pushy.width() + 'px', //jQuery fallback menu width
submenuClass = '.pushy-submenu',
@@ -20,6 +22,30 @@
submenuClosedClass = 'pushy-submenu-closed',
submenu = $(submenuClass);
+ //close menu w/ esc key
+ $(document).keyup(function(e) {
+ //check if esc key is pressed
+ if (e.keyCode == 27) {
+
+ //check if menu is open
+ if( body.hasClass(pushyOpenLeft) || body.hasClass(pushyOpenRight) ){
+ if(cssTransforms3d){
+ closePushy(); //close pushy
+ }else{
+ closePushyFallback();
+ opened = false; //set menu state
+ }
+
+ //focus on menu button after menu is closed
+ if(menuBtnFocus){
+ menuBtnFocus.focus();
+ }
+
+ }
+
+ }
+ });
+
function togglePushy(){
//add class to body based on menu position
if( pushy.hasClass(pushyLeft) ){
@@ -27,10 +53,25 @@
}else{
body.toggleClass(pushyOpenRight);
}
+
+ //focus on link in menu after css transition ends
+ if(menuLinkFocus){
+ pushy.one('transitionend', function() {
+ menuLinkFocus.focus();
+ });
+ }
+
}
- function openPushyFallback(){
+ function closePushy(){
+ if( pushy.hasClass(pushyLeft) ){
+ body.removeClass(pushyOpenLeft);
+ }else{
+ body.removeClass(pushyOpenRight);
+ }
+ }
+ function openPushyFallback(){
//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.addClass(pushyOpenLeft);
@@ -45,10 +86,13 @@
push.animate({right: menuWidth}, menuSpeed);
}
+ //focus on link in menu
+ if(menuLinkFocus){
+ menuLinkFocus.focus();
+ }
}
function closePushyFallback(){
-
//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.removeClass(pushyOpenLeft);
@@ -62,7 +106,6 @@
container.animate({right: "0px"}, menuSpeed);
push.animate({right: "0px"}, menuSpeed);
}
-
}
function toggleSubmenu(){
@@ -83,21 +126,6 @@
}
});
}
-
- 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(){
@@ -111,25 +139,26 @@
'transform':'transform'
};
- // Add it to the body to get the computed style
- document.body.insertBefore(el, null);
+ if(document.body !== null) {
+ // Add it to the body to get the computed style
+ document.body.insertBefore(el, null);
- for(var t in transforms){
- if( el.style[t] !== undefined ){
- el.style[t] = 'translate3d(1px,1px,1px)';
- supported = window.getComputedStyle(el).getPropertyValue(transforms[t]);
- }
- }
+ for(var t in transforms){
+ if( el.style[t] !== undefined ){
+ el.style[t] = 'translate3d(1px,1px,1px)';
+ supported = window.getComputedStyle(el).getPropertyValue(transforms[t]);
+ }
+ }
- document.body.removeChild(el);
+ document.body.removeChild(el);
- return (supported !== undefined && supported.length > 0 && supported !== "none");
+ return (supported !== undefined && supported.length > 0 && supported !== "none");
+ }else{
+ return false;
+ }
})();
if(cssTransforms3d){
- //make menu visible
- pushy.css({'visibility': 'visible'});
-
//toggle submenu
toggleSubmenu();
@@ -152,8 +181,6 @@
pushy.css({right: "-" + menuWidth});
}
- //make menu visible
- pushy.css({'visibility': 'visible'});
//fixes IE scrollbar issue
container.css({"overflow-x": "hidden"});
@@ -161,7 +188,7 @@
var opened = false;
//toggle submenu
- toggleSubmenuFallback();
+ toggleSubmenu();
//toggle menu
menuBtn.on('click', function(){
diff --git a/js/pushy.min.js b/js/pushy.min.js
index 087f1b8..aa3bb94 100644
--- a/js/pushy.min.js
+++ b/js/pushy.min.js
@@ -1 +1 @@
-!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
+!function(a){function b(){g.hasClass(k)?h.toggleClass(l):h.toggleClass(m),q&&g.one("transitionend",function(){q.focus()})}function c(){g.hasClass(k)?h.removeClass(l):h.removeClass(m)}function d(){g.hasClass(k)?(h.addClass(l),g.animate({left:"0px"},r),i.animate({left:s},r),j.animate({left:s},r)):(h.addClass(m),g.animate({right:"0px"},r),i.animate({right:s},r),j.animate({right:s},r)),q&&q.focus()}function e(){g.hasClass(k)?(h.removeClass(l),g.animate({left:"-"+s},r),i.animate({left:"0px"},r),j.animate({left:"0px"},r)):(h.removeClass(m),g.animate({right:"-"+s},r),i.animate({right:"0px"},r),j.animate({right:"0px"},r))}function f(){a(t).addClass(v),a(t).on("click",function(){var b=a(this);b.hasClass(v)?(a(t).addClass(v).removeClass(u),b.removeClass(v).addClass(u)):b.addClass(v).removeClass(u)})}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=a(".menu-btn"),q=a(g.data("focus")),r=200,s=g.width()+"px",t=".pushy-submenu",u="pushy-submenu-open",v="pushy-submenu-closed";a(t);a(document).keyup(function(a){27==a.keyCode&&(h.hasClass(l)||h.hasClass(m))&&(w?c():(e(),x=!1),p&&p.focus())});var w=function(){var a=document.createElement("p"),b=!1,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",MozTransform:"-moz-transform",transform:"transform"};if(null!==document.body){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}return!1}();if(w)f(),o.on("click",function(){b()}),n.on("click",function(){b()});else{h.addClass("no-csstransforms3d"),g.hasClass(k)?g.css({left:"-"+s}):g.css({right:"-"+s}),i.css({"overflow-x":"hidden"});var x=!1;f(),o.on("click",function(){x?(e(),x=!1):(d(),x=!0)}),n.on("click",function(){x?(e(),x=!1):(d(),x=!0)})}}(jQuery);
\ No newline at end of file
diff --git a/package.json b/package.json
index e2e0e2e..a4374ff 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": "1.0.0",
+ "version": "1.1.0",
"homepage": "http://www.christopheryee.ca/pushy/",
"author": {
"name": "Christopher Yee",
diff --git a/scss/demo.scss b/scss/demo.scss
index 87397ae..924a90a 100644
--- a/scss/demo.scss
+++ b/scss/demo.scss
@@ -1,5 +1,4 @@
html, body{
- -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
overflow-x: hidden;
}
@@ -28,6 +27,7 @@ ul{
color: #FFF;
text-align: center;
cursor: pointer;
+ border: 0px;
&:hover{
opacity: 0.6;
diff --git a/scss/pushy.scss b/scss/pushy.scss
index 80177c9..4253204 100644
--- a/scss/pushy.scss
+++ b/scss/pushy.scss
@@ -1,4 +1,4 @@
-/*! Pushy - v1.0.0 - 2016-3-1
+/*! Pushy - v1.1.0 - 2017-1-30
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
@@ -15,7 +15,6 @@ $menu_width: 200px !default;
z-index: 9999;
background: #191918;
overflow: auto;
- visibility: hidden;
-webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
a{
@@ -23,7 +22,6 @@ $menu_width: 200px !default;
color: #b3b3b1;
padding: 15px 30px;
text-decoration: none;
- outline: 0;
}
a:hover{
@@ -43,6 +41,10 @@ $menu_width: 200px !default;
}
}
+.pushy-content{
+ visibility: hidden;
+}
+
/* Menu Movement */
.pushy-left{
@@ -82,6 +84,10 @@ $menu_width: 200px !default;
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
+
+ .pushy-content{
+ visibility: visible;
+ }
}
/* Menu Transitions */
@@ -92,6 +98,10 @@ $menu_width: 200px !default;
transition: transform .2s cubic-bezier(.16, .68, .43, .99);
}
+.pushy-content{
+ transition: visibility .2s cubic-bezier(.16, .68, .43, .99);
+}
+
/* Site Overlay */
.site-overlay{
@@ -129,20 +139,38 @@ $menu_width: 200px !default;
.pushy-submenu{
ul{
padding-left: 15px;
- transition: max-height 0.2s ease-in-out;
+ transition: max-height 0.2s ease-in-out,
+ visibility 0.2s ease-in-out;
.pushy-link{
transition: opacity 0.2s ease-in-out;
}
}
+ /* Submenu Buttons */
+
+ button{
+ width: 100%;
+ color: #b3b3b1;
+ padding: 15px 30px;
+ text-align: left;
+ background: transparent;
+ border: 0;
+
+ &:hover{
+ color: #FFF;
+ }
+ }
+
/* Submenu Icon */
- > a {
+ > a,
+ > button {
position: relative;
}
- > a::after {
+ > a::after,
+ > button::after {
content: '';
display: block;
height: 11px;
@@ -164,6 +192,7 @@ $menu_width: 200px !default;
ul{
max-height: 0;
overflow: hidden;
+ visibility: hidden;
}
.pushy-link{
@@ -174,6 +203,7 @@ $menu_width: 200px !default;
.pushy-submenu-open{
ul{
max-height: 1000px;
+ visibility: visible;
}
.pushy-link{
@@ -182,18 +212,10 @@ $menu_width: 200px !default;
/* Submenu Icon */
- a::after {
+ a::after,
+ button::after{
-webkit-transform: translateY(-50%) rotate(90deg);
-ms-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
-}
-
-.no-csstransforms3d{
- .pushy-submenu-closed{
- ul{
- max-height: none;
- display: none;
- }
- }
-}
+}
\ No newline at end of file