Bootstrap off canvas nav component based on getbootstrap.com demo - CSS, HTML and JavaScript

bootstrap-3-off-canvas

/* CSS */

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right .sidebar-offcanvas {
	  padding: 1em;
	  right: -80%;
  }

  .row-offcanvas-left .sidebar-offcanvas {
	  left: -80%; 
  }

  .row-offcanvas-right.active {
	  right: 80%; 
  }

  .row-offcanvas-left.active {
	  left: 80%; 
  }

  .sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 80%; 
  }
}

<!-- HTML -->

<!-- Header -->
<nav class="navbar navbar-static-top" role="navigation">
  <div class="container header">
	
	<!-- Logo and desktop nav(s) -->
	
  	<!-- Toggle mobile menu -->
  	<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-collapse">
  		Show Menu
  	</button>
  	<!-- End .navbar-toggle -->
  </div>
</nav>

<div class="container primary-content row-offcanvas row-offcanvas-right">

  <!-- Main Page Content -->

  <!-- Mobile Sidebar Menu -->
	<div class="sidebar-offcanvas visible-xs" id="sidebar" role="navigation">
		<div class="list-group">
			<a href="/" class="list-group-item">About</a>
			<a href="/" class="list-group-item">Contact</a>
			<a href="/" class="list-group-item">Locations</a>
		</div>
	</div>
</div>


/* JavaScript */

// Handle offcanvas menu
function offCanvasMenu () {

	$('[data-toggle="offcanvas"]').on('click', function(){
		
		// Display offcanvas menu
		$('.row-offcanvas').toggleClass('active');
		
		// Position the offcanvas menu at the scrolled position on the page
		$('.sidebar-offcanvas').css('margin-top', $(window).scrollTop());
		
	});	
	
	// Close the offcanvas menu by clicking the page content
	// Bind event to body because it will not have a matching selector when the DOM is ready
	$('body').on('click', '.row-offcanvas-right.active', function() {
		$('.navbar-toggle').click();	
	});
}

$( document ).ready(function() {

	// Handle offcanvas menu
	offCanvasMenu();
}