From 3ed928000ad00e97d613a0f0b376ee010d9c24a3 Mon Sep 17 00:00:00 2001 From: Josh Date: Sat, 17 Sep 2016 23:53:07 -0400 Subject: [PATCH] Add support for Velocity.js animations and stop animation queue before animating. --- README.md | 9 +++- bower.json | 2 +- dist/jquery.slicknav.js | 87 ++++++++++++++++++++++++------------- dist/jquery.slicknav.min.js | 4 +- dist/slicknav.css | 2 +- dist/slicknav.min.css | 2 +- jquery.slicknav.js | 85 +++++++++++++++++++++++------------- package.json | 2 +- 8 files changed, 126 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 2ea386a..7abc45f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# SlickNav v1.0.7 +# SlickNav v1.0.8 ## Responsive Mobile Menu jQuery Plugin [![Join the chat at https://gitter.im/ComputerWolf/SlickNav](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ComputerWolf/SlickNav?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) @@ -56,6 +56,7 @@ slicknav.css can be modified to fit website design 'removeIds': true // Remove IDs from all menu elements. Defaults to false if duplicate set to false. 'removeClasses': false // Remove classes from all menu elements. 'brand': '' // Add branding to menu bar. + 'animations': 'jquery' // Animation library. Currently supports "jquery" and "velocity". ### Callbacks 'init': function(){}, // Called after SlickNav creation @@ -68,7 +69,11 @@ slicknav.css can be modified to fit website design $('.menu').slicknav('toggle'); // Method to toggle the menu $('.menu').slicknav('open'); // Method to open the menu $('.menu').slicknav('close'); // Method to close the menu + +### Animations +SlickNav will use jQuery for animations by default. If you wish to use Velocity.js for animating, be sure to include the library in your code before including SlickNav. +### Menu Display Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation. For example: @@ -97,4 +102,4 @@ More examples at [SlickNav.com](http://slicknav.com) * Opera * IE7+ * Android Browser -* iOS Safari +* iOS Safari \ No newline at end of file diff --git a/bower.json b/bower.json index 53dfd1e..de5994e 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "slicknav", - "version": "1.0.7", + "version": "1.0.8", "authors": [ "Josh Cope" ], diff --git a/dist/jquery.slicknav.js b/dist/jquery.slicknav.js index 0e96d65..62a7e29 100644 --- a/dist/jquery.slicknav.js +++ b/dist/jquery.slicknav.js @@ -1,5 +1,5 @@ /*! - * SlickNav Responsive Mobile Menu v1.0.7 + * SlickNav Responsive Mobile Menu v1.0.8 * (c) 2016 Josh Cope * licensed under MIT */ @@ -25,6 +25,7 @@ removeClasses: false, removeStyles: false, brand: '', + animations: 'jquery', init: function () {}, beforeOpen: function () {}, beforeClose: function () {}, @@ -333,23 +334,52 @@ if (animate) { duration = settings.duration; } + + function afterOpen(trigger, parent) { + $(trigger).removeClass(prefix+'_animating'); + $(parent).removeClass(prefix+'_animating'); + + //Fire afterOpen callback + if (!init) { + settings.afterOpen(trigger); + } + } + + function afterClose(trigger, parent) { + el.attr('aria-hidden','true'); + items.attr('tabindex', '-1'); + $this._setVisAttr(el, true); + el.hide(); //jQuery 1.7 bug fix + + $(trigger).removeClass(prefix+'_animating'); + $(parent).removeClass(prefix+'_animating'); + + //Fire init or afterClose callback + if (!init){ + settings.afterClose(trigger); + } else if (trigger == 'init'){ + settings.init(); + } + } if (el.hasClass(prefix+'_hidden')) { el.removeClass(prefix+'_hidden'); //Fire beforeOpen callback - if (!init) { - settings.beforeOpen(trigger); - } - el.slideDown(duration, settings.easingOpen, function(){ - - $(trigger).removeClass(prefix+'_animating'); - $(parent).removeClass(prefix+'_animating'); - - //Fire afterOpen callback - if (!init) { - settings.afterOpen(trigger); - } - }); + if (!init) { + settings.beforeOpen(trigger); + } + if (settings.animations === 'jquery') { + el.stop(true,true).slideDown(duration, settings.easingOpen, function(){ + afterOpen(trigger, parent); + }); + } else if(settings.animations === 'velocity') { + el.velocity("finish").velocity("slideDown", { + easing: settings.easingOpen, + complete: function() { + afterOpen(trigger, parent); + } + }); + } el.attr('aria-hidden','false'); items.attr('tabindex', '0'); $this._setVisAttr(el, false); @@ -361,22 +391,19 @@ settings.beforeClose(trigger); } - el.slideUp(duration, this.settings.easingClose, function() { - el.attr('aria-hidden','true'); - items.attr('tabindex', '-1'); - $this._setVisAttr(el, true); - el.hide(); //jQuery 1.7 bug fix - - $(trigger).removeClass(prefix+'_animating'); - $(parent).removeClass(prefix+'_animating'); - - //Fire init or afterClose callback - if (!init){ - settings.afterClose(trigger); - } else if (trigger == 'init'){ - settings.init(); - } - }); + if (settings.animations === 'jquery') { + el.stop(true,true).slideUp(duration, this.settings.easingClose, function() { + afterClose(trigger, parent) + }); + } else if (settings.animations === 'velocity') { + + el.velocity("finish").velocity("slideUp", { + easing: settings.easingClose, + complete: function() { + afterClose(trigger, parent); + } + }); + } } }; diff --git a/dist/jquery.slicknav.min.js b/dist/jquery.slicknav.min.js index 1eda031..d10ed0e 100644 --- a/dist/jquery.slicknav.min.js +++ b/dist/jquery.slicknav.min.js @@ -1,6 +1,6 @@ /*! - * SlickNav Responsive Mobile Menu v1.0.7 + * SlickNav Responsive Mobile Menu v1.0.8 * (c) 2016 Josh Cope * licensed under MIT */ -!function(e,n,t){function a(n,t){this.element=n,this.settings=e.extend({},i,t),this.settings.duplicate||t.hasOwnProperty("removeIds")||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"►",openedSymbol:"▼",prependTo:"body",appendTo:"",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:"",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",l="slicknav";a.prototype.init=function(){var t,a,i=this,s=e(this.element),o=this.settings;if(o.duplicate?i.mobileNav=s.clone():i.mobileNav=s,o.removeIds&&(i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("id")})),o.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("class")})),o.removeStyles&&(i.mobileNav.removeAttr("style"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("style")})),t=l+"_icon",""===o.label&&(t+=" "+l+"_no-text"),"a"==o.parentTag&&(o.parentTag='a href="#"'),i.mobileNav.attr("class",l+"_nav"),a=e('
'),""!==o.brand){var r=e('
'+o.brand+"
");e(a).append(r)}i.btn=e(["<"+o.parentTag+' aria-haspopup="true" tabindex="0" class="'+l+"_btn "+l+'_collapsed">',''+o.label+"",'','','','',"",""].join("")),e(a).append(i.btn),""!==o.appendTo?e(o.appendTo).append(a):e(o.prependTo).prepend(a),a.append(i.mobileNav);var d=i.mobileNav.find("li");e(d).each(function(){var n=e(this),t={};if(t.children=n.children("ul").attr("role","menu"),n.data("menu",t),t.children.length>0){var a=n.contents(),s=!1,r=[];e(a).each(function(){return e(this).is("ul")?!1:(r.push(this),void(e(this).is("a")&&(s=!0)))});var d=e("<"+o.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+l+'_item"/>');if(o.allowParentLinks&&!o.nestedParentLinks&&s)e(r).wrapAll('').parent();else{var p=e(r).wrapAll(d).parent();p.addClass(l+"_row")}o.showChildren?n.addClass(l+"_open"):n.addClass(l+"_collapsed"),n.addClass(l+"_parent");var c=e(''+(o.showChildren?o.openedSymbol:o.closedSymbol)+"");o.allowParentLinks&&!o.nestedParentLinks&&s&&(c=c.wrap(d).parent()),e(r).last().after(c)}else 0===n.children().length&&n.addClass(l+"_txtnode");n.children("a").attr("role","menuitem").click(function(n){o.closeOnClick&&!e(n.target).parent().closest("li").hasClass(l+"_parent")&&e(i.btn).click()}),o.closeOnClick&&o.allowParentLinks&&(n.children("a").children("a").click(function(n){e(i.btn).click()}),n.find("."+l+"_parent-link a:not(."+l+"_item)").click(function(n){e(i.btn).click()}))}),e(d).each(function(){var n=e(this).data("menu");o.showChildren||i._visibilityToggle(n.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(n).mousedown(function(){i._outlines(!1)}),e(n).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+l+"_item",function(n){n.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(e){var n=e||event;13==n.keyCode&&(e.preventDefault(),i._menuToggle())}),i.mobileNav.on("keydown","."+l+"_item",function(n){var t=n||event;13==t.keyCode&&(n.preventDefault(),i._itemClick(e(n.target)))}),o.allowParentLinks&&o.nestedParentLinks&&e("."+l+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var n=this,t=n.btn,a=n.mobileNav;t.hasClass(l+"_collapsed")?(t.removeClass(l+"_collapsed"),t.addClass(l+"_open")):(t.removeClass(l+"_open"),t.addClass(l+"_collapsed")),t.addClass(l+"_animating"),n._visibilityToggle(a,t.parent(),!0,t)},a.prototype._itemClick=function(e){var n=this,t=n.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+l+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(l+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(l+"_collapsed")?(a.arrow.html(t.openedSymbol),a.parent.removeClass(l+"_collapsed"),a.parent.addClass(l+"_open"),a.parent.addClass(l+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(t.closedSymbol),a.parent.addClass(l+"_collapsed"),a.parent.removeClass(l+"_open"),a.parent.addClass(l+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(n,t,a,i,s){var o=this,r=o.settings,d=o._getActionItems(n),p=0;a&&(p=r.duration),n.hasClass(l+"_hidden")?(n.removeClass(l+"_hidden"),s||r.beforeOpen(i),n.slideDown(p,r.easingOpen,function(){e(i).removeClass(l+"_animating"),e(t).removeClass(l+"_animating"),s||r.afterOpen(i)}),n.attr("aria-hidden","false"),d.attr("tabindex","0"),o._setVisAttr(n,!1)):(n.addClass(l+"_hidden"),s||r.beforeClose(i),n.slideUp(p,this.settings.easingClose,function(){n.attr("aria-hidden","true"),d.attr("tabindex","-1"),o._setVisAttr(n,!0),n.hide(),e(i).removeClass(l+"_animating"),e(t).removeClass(l+"_animating"),s?"init"==i&&r.init():r.afterClose(i)}))},a.prototype._setVisAttr=function(n,t){var a=this,i=n.children("li").children("ul").not("."+l+"_hidden");t?i.each(function(){var n=e(this);n.attr("aria-hidden","true");var i=a._getActionItems(n);i.attr("tabindex","-1"),a._setVisAttr(n,t)}):i.each(function(){var n=e(this);n.attr("aria-hidden","false");var i=a._getActionItems(n);i.attr("tabindex","0"),a._setVisAttr(n,t)})},a.prototype._getActionItems=function(e){var n=e.data("menu");if(!n){n={};var t=e.children("li"),a=t.find("a");n.links=a.add(t.find("."+l+"_item")),e.data("menu",n)}return n.links},a.prototype._outlines=function(n){n?e("."+l+"_item, ."+l+"_btn").css("outline",""):e("."+l+"_item, ."+l+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(l+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(l+"_open")&&e._menuToggle()},e.fn[s]=function(n){var t=arguments;if(void 0===n||"object"==typeof n)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,n))});if("string"==typeof n&&"_"!==n[0]&&"init"!==n){var i;return this.each(function(){var l=e.data(this,"plugin_"+s);l instanceof a&&"function"==typeof l[n]&&(i=l[n].apply(l,Array.prototype.slice.call(t,1)))}),void 0!==i?i:this}}}(jQuery,document,window); \ No newline at end of file +!function(e,n,t){function a(n,t){this.element=n,this.settings=e.extend({},i,t),this.settings.duplicate||t.hasOwnProperty("removeIds")||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"►",openedSymbol:"▼",prependTo:"body",appendTo:"",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:"",animations:"jquery",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",o="slicknav";a.prototype.init=function(){var t,a,i=this,s=e(this.element),l=this.settings;if(l.duplicate?i.mobileNav=s.clone():i.mobileNav=s,l.removeIds&&(i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("id")})),l.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("class")})),l.removeStyles&&(i.mobileNav.removeAttr("style"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("style")})),t=o+"_icon",""===l.label&&(t+=" "+o+"_no-text"),"a"==l.parentTag&&(l.parentTag='a href="#"'),i.mobileNav.attr("class",o+"_nav"),a=e('
'),""!==l.brand){var r=e('
'+l.brand+"
");e(a).append(r)}i.btn=e(["<"+l.parentTag+' aria-haspopup="true" tabindex="0" class="'+o+"_btn "+o+'_collapsed">',''+l.label+"",'','','','',"",""].join("")),e(a).append(i.btn),""!==l.appendTo?e(l.appendTo).append(a):e(l.prependTo).prepend(a),a.append(i.mobileNav);var c=i.mobileNav.find("li");e(c).each(function(){var n=e(this),t={};if(t.children=n.children("ul").attr("role","menu"),n.data("menu",t),t.children.length>0){var a=n.contents(),s=!1,r=[];e(a).each(function(){return!e(this).is("ul")&&(r.push(this),void(e(this).is("a")&&(s=!0)))});var c=e("<"+l.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+o+'_item"/>');if(l.allowParentLinks&&!l.nestedParentLinks&&s)e(r).wrapAll('').parent();else{var d=e(r).wrapAll(c).parent();d.addClass(o+"_row")}l.showChildren?n.addClass(o+"_open"):n.addClass(o+"_collapsed"),n.addClass(o+"_parent");var p=e(''+(l.showChildren?l.openedSymbol:l.closedSymbol)+"");l.allowParentLinks&&!l.nestedParentLinks&&s&&(p=p.wrap(c).parent()),e(r).last().after(p)}else 0===n.children().length&&n.addClass(o+"_txtnode");n.children("a").attr("role","menuitem").click(function(n){l.closeOnClick&&!e(n.target).parent().closest("li").hasClass(o+"_parent")&&e(i.btn).click()}),l.closeOnClick&&l.allowParentLinks&&(n.children("a").children("a").click(function(n){e(i.btn).click()}),n.find("."+o+"_parent-link a:not(."+o+"_item)").click(function(n){e(i.btn).click()}))}),e(c).each(function(){var n=e(this).data("menu");l.showChildren||i._visibilityToggle(n.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(n).mousedown(function(){i._outlines(!1)}),e(n).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+o+"_item",function(n){n.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(e){var n=e||event;13==n.keyCode&&(e.preventDefault(),i._menuToggle())}),i.mobileNav.on("keydown","."+o+"_item",function(n){var t=n||event;13==t.keyCode&&(n.preventDefault(),i._itemClick(e(n.target)))}),l.allowParentLinks&&l.nestedParentLinks&&e("."+o+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var n=this,t=n.btn,a=n.mobileNav;t.hasClass(o+"_collapsed")?(t.removeClass(o+"_collapsed"),t.addClass(o+"_open")):(t.removeClass(o+"_open"),t.addClass(o+"_collapsed")),t.addClass(o+"_animating"),n._visibilityToggle(a,t.parent(),!0,t)},a.prototype._itemClick=function(e){var n=this,t=n.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+o+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(o+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(o+"_collapsed")?(a.arrow.html(t.openedSymbol),a.parent.removeClass(o+"_collapsed"),a.parent.addClass(o+"_open"),a.parent.addClass(o+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(t.closedSymbol),a.parent.addClass(o+"_collapsed"),a.parent.removeClass(o+"_open"),a.parent.addClass(o+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(n,t,a,i,s){function l(n,t){e(n).removeClass(o+"_animating"),e(t).removeClass(o+"_animating"),s||d.afterOpen(n)}function r(t,a){n.attr("aria-hidden","true"),p.attr("tabindex","-1"),c._setVisAttr(n,!0),n.hide(),e(t).removeClass(o+"_animating"),e(a).removeClass(o+"_animating"),s?"init"==t&&d.init():d.afterClose(t)}var c=this,d=c.settings,p=c._getActionItems(n),u=0;a&&(u=d.duration),n.hasClass(o+"_hidden")?(n.removeClass(o+"_hidden"),s||d.beforeOpen(i),"jquery"===d.animations?n.stop(!0,!0).slideDown(u,d.easingOpen,function(){l(i,t)}):"velocity"===d.animations&&n.velocity("finish").velocity("slideDown",{easing:d.easingOpen,complete:function(){l(i,t)}}),n.attr("aria-hidden","false"),p.attr("tabindex","0"),c._setVisAttr(n,!1)):(n.addClass(o+"_hidden"),s||d.beforeClose(i),"jquery"===d.animations?n.stop(!0,!0).slideUp(u,this.settings.easingClose,function(){r(i,t)}):"velocity"===d.animations&&n.velocity("finish").velocity("slideUp",{easing:d.easingClose,complete:function(){r(i,t)}}))},a.prototype._setVisAttr=function(n,t){var a=this,i=n.children("li").children("ul").not("."+o+"_hidden");t?i.each(function(){var n=e(this);n.attr("aria-hidden","true");var i=a._getActionItems(n);i.attr("tabindex","-1"),a._setVisAttr(n,t)}):i.each(function(){var n=e(this);n.attr("aria-hidden","false");var i=a._getActionItems(n);i.attr("tabindex","0"),a._setVisAttr(n,t)})},a.prototype._getActionItems=function(e){var n=e.data("menu");if(!n){n={};var t=e.children("li"),a=t.find("a");n.links=a.add(t.find("."+o+"_item")),e.data("menu",n)}return n.links},a.prototype._outlines=function(n){n?e("."+o+"_item, ."+o+"_btn").css("outline",""):e("."+o+"_item, ."+o+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(o+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(o+"_open")&&e._menuToggle()},e.fn[s]=function(n){var t=arguments;if(void 0===n||"object"==typeof n)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,n))});if("string"==typeof n&&"_"!==n[0]&&"init"!==n){var i;return this.each(function(){var o=e.data(this,"plugin_"+s);o instanceof a&&"function"==typeof o[n]&&(i=o[n].apply(o,Array.prototype.slice.call(t,1)))}),void 0!==i?i:this}}}(jQuery,document,window); \ No newline at end of file diff --git a/dist/slicknav.css b/dist/slicknav.css index 51e12c1..d9bc165 100644 --- a/dist/slicknav.css +++ b/dist/slicknav.css @@ -1,5 +1,5 @@ /*! - * SlickNav Responsive Mobile Menu v1.0.7 + * SlickNav Responsive Mobile Menu v1.0.8 * (c) 2016 Josh Cope * licensed under MIT */ diff --git a/dist/slicknav.min.css b/dist/slicknav.min.css index 0be5e6a..d453693 100644 --- a/dist/slicknav.min.css +++ b/dist/slicknav.min.css @@ -1,5 +1,5 @@ /*! - * SlickNav Responsive Mobile Menu v1.0.7 + * SlickNav Responsive Mobile Menu v1.0.8 * (c) 2016 Josh Cope * licensed under MIT */.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_menu .slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_menu .slicknav_icon:before{background:0 0;width:1.125em;height:.875em;display:block;content:"";position:absolute}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.slicknav_menu:after,.slicknav_menu:before{content:" ";display:table}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{*zoom:1;font-size:16px;background:#4c4c4c;padding:5px}.slicknav_nav,.slicknav_nav ul{list-style:none;overflow:hidden;padding:0}.slicknav_menu .slicknav_icon-bar{background-color:#fff}.slicknav_btn{margin:5px 5px 6px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#222}.slicknav_nav{clear:both;color:#fff;margin:0;font-size:.875em}.slicknav_nav ul{margin:0 0 0 20px}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:5px 10px;margin:2px 5px}.slicknav_nav .slicknav_row:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#fff}.slicknav_nav a{text-decoration:none;color:#fff}.slicknav_nav a:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#222}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px} \ No newline at end of file diff --git a/jquery.slicknav.js b/jquery.slicknav.js index cc82eb2..6a7093b 100644 --- a/jquery.slicknav.js +++ b/jquery.slicknav.js @@ -20,6 +20,7 @@ removeClasses: false, removeStyles: false, brand: '', + animations: 'jquery', init: function () {}, beforeOpen: function () {}, beforeClose: function () {}, @@ -328,23 +329,52 @@ if (animate) { duration = settings.duration; } + + function afterOpen(trigger, parent) { + $(trigger).removeClass(prefix+'_animating'); + $(parent).removeClass(prefix+'_animating'); + + //Fire afterOpen callback + if (!init) { + settings.afterOpen(trigger); + } + } + + function afterClose(trigger, parent) { + el.attr('aria-hidden','true'); + items.attr('tabindex', '-1'); + $this._setVisAttr(el, true); + el.hide(); //jQuery 1.7 bug fix + + $(trigger).removeClass(prefix+'_animating'); + $(parent).removeClass(prefix+'_animating'); + + //Fire init or afterClose callback + if (!init){ + settings.afterClose(trigger); + } else if (trigger == 'init'){ + settings.init(); + } + } if (el.hasClass(prefix+'_hidden')) { el.removeClass(prefix+'_hidden'); //Fire beforeOpen callback - if (!init) { - settings.beforeOpen(trigger); - } - el.slideDown(duration, settings.easingOpen, function(){ - - $(trigger).removeClass(prefix+'_animating'); - $(parent).removeClass(prefix+'_animating'); - - //Fire afterOpen callback - if (!init) { - settings.afterOpen(trigger); - } - }); + if (!init) { + settings.beforeOpen(trigger); + } + if (settings.animations === 'jquery') { + el.stop(true,true).slideDown(duration, settings.easingOpen, function(){ + afterOpen(trigger, parent); + }); + } else if(settings.animations === 'velocity') { + el.velocity("finish").velocity("slideDown", { + easing: settings.easingOpen, + complete: function() { + afterOpen(trigger, parent); + } + }); + } el.attr('aria-hidden','false'); items.attr('tabindex', '0'); $this._setVisAttr(el, false); @@ -356,22 +386,19 @@ settings.beforeClose(trigger); } - el.slideUp(duration, this.settings.easingClose, function() { - el.attr('aria-hidden','true'); - items.attr('tabindex', '-1'); - $this._setVisAttr(el, true); - el.hide(); //jQuery 1.7 bug fix - - $(trigger).removeClass(prefix+'_animating'); - $(parent).removeClass(prefix+'_animating'); - - //Fire init or afterClose callback - if (!init){ - settings.afterClose(trigger); - } else if (trigger == 'init'){ - settings.init(); - } - }); + if (settings.animations === 'jquery') { + el.stop(true,true).slideUp(duration, this.settings.easingClose, function() { + afterClose(trigger, parent) + }); + } else if (settings.animations === 'velocity') { + + el.velocity("finish").velocity("slideUp", { + easing: settings.easingClose, + complete: function() { + afterClose(trigger, parent); + } + }); + } } }; diff --git a/package.json b/package.json index ad03334..9b390a2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.7", + "version": "1.0.8", "name": "slicknav", "description": "", "keywords": [