slide panel - offcanvas drawer menu

slidepanel

    SlidePanel = function(elem, options) {
        var self = this; // store reference to this
          this.elem = elem;
          this.$elem = $(elem);
          this.options = options;

          this.metadata = this.$elem.data( "slidepanel-options" );
    };

    SlidePanel.prototype = {
        defaults: {
          "close" : ".slide-panel-close .close-btn",
          "open"  : ".slide-panel-open-left",
          "dirOpenedClass": "slide-panel-opened-left",
          "openedClass": "slide-panel-opened",
          "nodes" : {
            "parent": "body, html",
            "page"  : ".slide-panel-overlay",
            "moved" : ".is-moved"
          },

          "panToSide": "left",
          "iscart"  : false,
          "beforeOpen" : function () {},
          "afterOpen"  : function() {},
          "beforeClose": function() {},
          "afterClose" : function() {},
        },
        init: function() {
              var self = this;
              this.config = $.extend({}, this.defaults, this.options, this.metadata);

              this.$nodes =  {
                "parent": $(this.config.nodes.parent),
                "page":   $(this.config.nodes.page),
                "moved":  $(this.config.nodes.move),
              };

              this.iscart  = this.config.iscart;

              if (!this.$elem.length) {
                return false;
              }
              this.panelIsOpen = false;

              $(this.config.open).on("click.slidePanel", function(evt) {
                  self.open(evt);
              });

              this.$elem.find(this.config.close).on("click.slidePanel", function(evt) {
                 self.close(evt);
              });

              return this;
        },
        open : function (evt) {
            this.$elem
            .removeClass("pan-left pan-right")
            .addClass("pan-"+ this.config.panToSide);

            if (window.ajaxcart_type == "modal" && this.iscart ) {
               var externalCall = false;
               this.$elem.modal();//Use modal Bootstrap
               if (evt) {
                     evt.preventDefault();
                } else {
                     externalCall = true;
                }
               if (evt && evt.preventDefault) {
                  evt.preventDefault();
                  this.$activeSource = $(evt.currentTarget);
               }
               if (this.config.afterOpen && typeof(this.config.afterOpen) == "function") {
                  if (!externalCall) {
                     this.config.afterOpen();
                  }
               }
            } else {
                var externalCall = false;
                if (evt) {
                     evt.preventDefault();
                } else {
                     externalCall = true;
                }
                if (evt && evt.preventDefault) {
                  evt.preventDefault();
                  this.$activeSource = $(evt.currentTarget);
                }
                if (this.panelIsOpen && !externalCall) {
                  return this.close();
                }

                if (this.config.beforeOpen && typeof(this.config.beforeOpen) == "function") {
                     this.config.beforeOpen();
                }

                if(this.$nodes.moved.length){
                }
                this.$nodes.moved.addClass("is-transitioning");

                this.$elem.prepareTransition();
                this.$nodes.parent.addClass(this.config.openedClass + " " + this.config.dirOpenedClass);
                this.panelIsOpen = true;
                this.$elem.attr("tabindex", "-1");
                if (this.config.afterOpen && typeof(this.config.afterOpen) == "function") {

                  if (!externalCall) {
                     this.config.afterOpen();
                  }
                }
                if (this.$activeSource && this.$activeSource.attr("aria-expanded")) {
                  this.$activeSource.attr("aria-expanded", "true");
                }
                this.$nodes.page.on("touchmove.slidePanel", function () {
                  return false;
                });

               this.$nodes.page.on("click.slidePanel", $.proxy(function () {

                  this.close();
                  return false;
               }, this));
            }
        },
        close : function () {
            if (!this.panelIsOpen) { // already closed
                  return;
            }

            if (this.config.beforeClose && typeof(this.config.beforeClose) == "function") {
                 this.config.beforeClose();
            }

            if(document.activeElement){
              $(document.activeElement).trigger("blur");
            }
            this.$nodes.moved.prepareTransition({ disableExisting: true });
            this.$elem.prepareTransition({ disableExisting: true });
            this.$nodes.parent.removeClass(this.config.dirOpenedClass + " " + this.config.openedClass);
            this.panelIsOpen = false;
            this.$elem.removeAttr("tabindex");
            this.$nodes.page.off("click.slidePanel");

            if (this.config.afterClose && typeof(this.config.afterClose) == "function") {
               this.config.afterClose();
            }

        }
      };

    SlidePanel.defaults = SlidePanel.prototype.defaults;

    $.fn.slidePanel = function(options) {
        return this.each(function() {
          new SlidePanel(this, options).init();
        });
    };

    $("#off-canvas-cart").slidePanel({
    "open": ".cart-toggler",
    "dirOpenedClass": "slide-panel-opened-right",
    "openedClass": "slide-panel-opened",
    "panToSide":"right",
    });

http://jsfiddle.net/moyarich/9m5c4a20/

https://gist.github.com/jlong/5413611 - Prepare transition