<div class="cont-navLeft">
  <ul class="nav-menu">
    <li class="title">Left Menu</li>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Work</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div> <!-- /.cont-navLeft -->

<div class="cont-navRight">
  <ul class="nav-menu">
    <li class="title">Right Menu</li>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Work</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div> <!-- /.cont-navRight -->


<div class="l-row">
  <div class="cont-btn">
    <h1>Demo for left/right push menu's.</h1>
    <a href="" id="left-menu" class="btn">Left Menu</a>
    <a href="" id="right-menu" class="btn">Right Menu</a>
  </div> <!-- /.cont-btn -->
</div> <!-- /.cont-main -->

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300);

$base_font: 'Raleway', sans-serif;
$emerald: #2ecc71;
$clouds: #ecf0f1;
$nephritis: #27ae60;

/* Mixins */
@mixin transition($speed) {
    -webkit-transition: all $speed ease;
    -moz-transition: all $speed ease;
    transition: all $speed ease;
}

@mixin shadow($color) {
  -moz-box-shadow: 0px 0px 7px 4px $color;
  -webkit-box-shadow: 0px 0px 7px 4px $color;
  box-shadow: 0px 0px 7px 4px $color;
}


body {
  background-color: $clouds;
  font-family: $base_font;
  left: 0;
  overflow-x: hidden;
  position: relative;
  
  @include transition(0.3s);
}

h1 {
  color:#333333;
  text-align:center;
}

a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

.l-row {
  margin: 0 auto;
  max-width:980px;
  width: 100%;
}

.cont-btn {
  margin: 0 auto;
  max-width: 300px;
  padding: 2%;
  width: 100%;
}

.btn {
  background-color: $emerald;
  float: left;
  margin: 10px 0;
  padding: 15px 0;
  text-align: center;
  width: 100%;
  
  @include shadow(#bdbdbd);
}

.btn:hover {
  opacity: .8;
}

/******/
.cont-nav {
  background-color: $nephritis;
  height: 100%;
  position: fixed;
  top: 0;
  width: 200px;
  z-index: 1000;
  
  @include transition(0.3s);
}

.cont-navLeft {
  @extend .cont-nav;
  left: -200px;
}

.cont-navRight {
  @extend .cont-nav;
  right: -200px;
}

.nav-menu {
  
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  
  .title {
    color: #fff;
    font-size: 18px;
    padding: 12px 0;
    text-align: center;
  }
  
  li {
    border-bottom: 1px solid #2cc36c;
    
    a {
      display: block;
      padding:12px 0 12px 15px;
      width: 185px;
    }
    
    a:hover {
      background-color:#239c56;
    }
  }
}

/* Push body and nav */
.push-right {
  left:200px;
}

.push-left {
  left: -200px;
}

.openLeft {
  left: 0;
}

.openRight {
  right: 0;
}

$(document).ready(function(){

  var navLeft = $('.cont-navLeft');
  var showLeft = $('#left-menu');
  
  var navRight = $('.cont-navRight');
  var showRight = $('#right-menu');
  
 $(showLeft).click(function(){
		$(navLeft).toggleClass("openLeft");
		$(document.body).toggleClass("push-right");
		return false;
	});
  
  $(showRight).click(function(){
		$(navRight).toggleClass("openRight");
		$(document.body).toggleClass("push-left");
		return false;
	});
});