Skip to content

Instantly share code, notes, and snippets.

@mpampols
Created January 26, 2015 10:52
Show Gist options
  • Save mpampols/5d181ca4809e5f185c09 to your computer and use it in GitHub Desktop.
Save mpampols/5d181ca4809e5f185c09 to your computer and use it in GitHub Desktop.
jQuery Slidify Menu Plugin
/**
* jQuery Slidify Menu Plugin by Marc Pampols <mpampols@gmail.com>
*
* Example usage:
* $(".portlet-pensando-en-ti .portletItem").slidify({
* slideInSpeed: 200,
* slideOutSpeed: 400
* });
**/
;(function($) {
"use strict";
$.fn.slidify = function(options) {
var settings = $.extend({
slideInSpeed : 400, // Speed for slide in
slideOutSpeed : 400, // Speed for slide out
easing : "swing" // Animation easing
}, options);
var selector = this.selector; // Current menu selector
var menu_object = null;
var init = function() {
var menu_object = $(selector);
menu_object.children("div").each(function() {
var menu_element = $(this).children(".item-menu");
var submenu_element = $(this).children(".items-submenu");
// Show submenu
menu_element.on("click", function(e) {
e.preventDefault();
$(submenu_element).animate({
left: "0",
}, settings.slideInSpeed, settings.easing, function() {});
});
// Back to menu
submenu_element.on("click", function(e) {
e.preventDefault();
$(submenu_element).animate({
left: "100%",
}, settings.slideOutSpeed, settings.easing, function() {});
})
});
};
init();
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment