Off-canvas navigation

index.html

<div id="container">
  <div class="sidebar_left ">
  		<a href="#" class="close mobile-only">X</a>
  		<div class="inner-div">
  		  Content Goes Here
  		</div>
  </div>
  <div class="sidebar_right mobile-only">
  		<a href="#" class="close mobile-only">X</a>
  		<div class="inner-div">
  		  Content Goes Here
  		</div>
  </div>
  <div class="main-content">
  
    <div id="category-list">Show sidebar-left</div>
    <div id="basket-list">Show sidebar-right</div>
    Always seen content area
  </div>
</div>

offcancas.scss

/********************************************
			   A N I M A T I C S

	This is where all those lovely things
	bourbon does can be kept, a place where
	mixins and animation styles can be defined,
	without including a whole library.

********************************************/

$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);

/********************************************
				B O U R B O N

	Note: If you don't know what you
	do and don't want, just uncomment
	bourbon below and just enjoy life
	with a glass of bourbon.

********************************************/

//@import 'bourbon';


body{
	max-width: 100%;
	overflow-x: hidden;
}

$white: white;
$black: black;
$brand-colour: #4083C4;
$brand-highlight: lighten(#4083C4, 10%); 

@media only screen and (max-width: $tablet){

	@mixin slide {
	   -webkit-transition: 0.5s all $ease-in-out-quart;
	   -moz-transition: 0.5s all $ease-in-out-quart;
	   -ms-transition: 0.5s all $ease-in-out-quart;
	   transition: 0.5s all $ease-in-out-quart;
	}
	
/***************************************
	R E Q U I R E D   E L E M E N T S
***************************************/	
	
	#container{
		position: relative;
	    @include slide;
	}
	

	// This allows iOS to scroll without scrolling.
	.inner-div {
	    height: 100%;
	    overflow: scroll;
	}
	
/***************************************
	S I D E B A R S
***************************************/

	.sidebar_left {
	    background: darken($brand-colour, 10%);
	    position: fixed;
	    top: 0;
	    height: 100%;
	    width: 100%;
	    z-index: 100;
	    color: $white;
	    left: -100%;
	    @include slide;
	
		.close{
			position: absolute;
			top: 5px;
			right: 15px;
			@include font-size(2);
			color: $brand-highlight;
			outline: 0;
	
			&:hover, &:active, &:visited{
				color: $brand-highlight;
			}
		}

	}

	.sidebar_right {
	    background: darken($brand-colour, 10%);
	    position: fixed;
	    top: 0;
	    height: 100%;
	    width: 100%;
	    z-index: 100;
	    color: $white;
	    right: -100%;
	    @include slide;

		.close{
			position: absolute;
			top: 5px;
			right: 15px;
			@include font-size(2);
			color: $brand-highlight;
			outline: 0;
	
			&:hover, &:active, &:visited{
				color: $brand-highlight;
			}
		}
	}
}

style.js

jQuery(document).ready(function($) {
var resize = function() {
	var browserwidth = $(window).width();
	$('.sidebar_left').css('left', -browserwidth);
	$('.sidebar_right').css('right', -browserwidth);
	$('#container').css('left', '0');


	//On Category Click, Slide everything to the right	
	$('#category-list').on('click', function(){
		$('.sidebar_left').css('left', '0');
		$('#container').css('left', browserwidth);

		// Get the normal screen back into play		
		$('.sidebar_left .close').on('click', function(){
			$('.sidebar_left').css('left', -browserwidth);
			$('#container').css('left', '0');
		});
	});

	//On Basket Click, Slide everything to the left	
	$('#basket-list').on('click', function(){
		$('.sidebar_right').css('right', '0');
		$('#container').css('left', -browserwidth);

		// Get the normal screen back into play		
		$('.sidebar_right .close').on('click', function(){
			$('.sidebar_right').css('right', -browserwidth);
			$('#container').css('left', '0');
		});
	});
};

$(window).resize(resize);
resize();