Bootstrap 3 - Collapse Navbar - off canvas cart

by moyarich

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div id="off-canvas-cart" class="mobile-cart slide-panel" tabindex="-1">
  <div class="slide-panel-inner">
		<div class="slide-panel-header header-cart-mobile clearfix">
			<div class="header">
				<div class="heading-back">
					<div class="view-cart">
						<a href="/shopping-cart?ref=csil" class="btn btn-tertiary" >View Cart</a>
					</div>
				</div>
			</div>
			<div id="closed-cart" class="slide-panel-close">
				<button type="button" class="close-btn"><i class="fa fa-times " aria-hidden="true"></i></button>
			</div>
		</div>
    	<div class="slide-panel-body">
    	off canvas  cart details
		</div>
   </div>
</div><!-- .off-canvas-cart -->

<div class="navbar navbar-inverse ">
    <div class="container">
        <!-- Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>
        </div>
        <!-- Navbar Links -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#cart" class="cart-toggler">Cart</a></li>
            </ul>
        </div>
    </div>
</div>

<button id="ToggleNavAttr" class="btn btn-primary btn-lg" 
   data-toggle="collapse" data-target=".navbar-collapse" >
        Toggle Nav Attribute
</button>
<button id="ToggleNavScript" class="btn btn-primary btn-lg" >
    Toggle Nav...

CSS

.slide-panel-opened .overlay-mask:before ,
.search-active .overlay-mask:before
{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999
}


.slide-panel {
  -webkit-transform: translateZ(0);
  will-change: transform;
  display: none;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 15px 15px;  
  max-width: 95%;
  z-index: 90000;
  color: #c3cfd8;
  background-color: #31373d;  
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1)
}

.slide-panel-inner{
  position: relative;
  z-index:1;
  padding-top: 30px;
}

.slide-panel-opened {
  overflow: hidden;
  height: 100%;
  position: relative
}


.pan-left {
  width: 300px;
  left: -300px
}

.pan-right {
  width: 300px;
  right: -300px
}


.slide-panel-opened-left .pan-left {
  display: block;
  -webkit-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -o-transform: translateX(300px)
}

.slide-panel-opened-right .pan-right {
  display: block;
  -webkit-transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -o-transform: translateX(-300px)
}

.slide-panel-opened-left .is-moved {
  -webkit-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -ms-transform: translateX(300px);
  -o-transform: translateX(300px)
}

.slide-panel-opened-right .is-moved {
  -webkit-transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -o-transform: translateX(-300px)
}

.slide-panel a {
  color: #c3cfd8
}

.slide-panel a:hover, .slide-panel a:focus {
  opacity: 0.7
}

.slide-panel input, .slide-panel textarea {
  border: 1px solid...

JavaScript

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;
...