pgarciacamou/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title> ... </title>
  <link href="css/nav.css" rel="stylesheet" type="text/css">
</head>
<body class="">
  <section id="nav-container" class="right">
    <nav class="right"></nav>
    <nav class="left"></nav>
  </section>
  <script type="text/javascript" src="js/nav.js"></script>
</body>
</html>

## nav.js
function Nav(el){
  this.state = 2;
  this.upperBoundState = 3;
  this.lowerBoundState = 0;
  this.el = el;
}
Nav.prototype = {
  constructor: Nav,
  _states: ["", "left", "right", ""],
  updateState: function(direction){
    var newState = this.state + direction;
    if(newState < this.lowerBoundState) return;
    if(newState > this.updateState) return;
    var el = this.el;
    var state = this._states[this.state = newState];
    el.classList.remove("left");
    el.classList.remove("right");
    if(state !== "") el.classList.add(this._states[this.state = newState]);
  }
};


(function (el) {
  var $ = document.querySelector.bind(document);
  var $$ = document.querySelectorAll.bind(document);
  var nav = new Nav($("#nav-container"));

  var tresholdX = 60;
  var tresholdY = 60;

  // The context prevents collition with other listener attached to the document.body.
  var ctx = {};

  // On touch start
  el.addEventListener("touchstart", function(e) {
    e.stopPropagation();
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
    this.hasMoved = false;
    this.horizontalMove = 0;
    this.verticalMove = 0;
    this.direction = 0;
    this.touchStarted = Date.now();
  }.bind(ctx), false);

  // On touch move
  el.addEventListener("touchmove", function(e) {
    var xMove = e.touches[0].clientX - this.startX;
    var yMove = e.touches[0].clientY - this.startY;

    if(Math.abs(xMove) > tresholdX) this.horizontalMove = xMove > 0 ? 1 : -1;
    if(Math.abs(yMove) > tresholdY) this.verticalMove = yMove > 0 ? 1 : -1;
  }.bind(ctx), false);

  // On touch end
  el.addEventListener("touchend", function(e) {
    e.preventDefault();
    e.stopPropagation();

    if(Date.now() < this.touchStarted + 80) return; // prevents unintended clicks
    if(this.horizontalMove === 0 && this.verticalMove === 0) return; // didn't move
    if(this.horizontalMove !== 0 && this.verticalMove !== 0) return; // moved in both directions

    if(this.horizontalMove !== 0) {
      nav.updateState(this.horizontalMove);
    }
  }.bind(ctx), false);
})(document.body);

## nav.scss
// NAVIGATION
// ---------------------------------------------
nav {
  $translateX: 200%;
  $separation: 0.3rem;
  $animation-time: 500ms;
  background-color: white;
  position: fixed;
  opacity: 0.6;
  bottom: $separation * 2;
  width: 2rem;
  height: 15rem;
  -webkit-transition: -webkit-transform $animation-time ease-in-out;
  transition: transform $animation-time ease-in-out;
  &.right {
    right: $separation;
    @include vendor-prefix(transform, translateX($translateX) scale(0.5,0.5));
    #nav-container.right & {
      @include vendor-prefix(transform, translateX(0) scale(1,1));
    }
  }
  &.left {
    left: $separation;
    @include vendor-prefix(transform, translateX(-$translateX) scale(0.5,0.5));
    #nav-container.left & {
      @include vendor-prefix(transform, translateX(0) scale(1,1));
    }
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title> ... </title>
	<link href="css/nav.css" rel="stylesheet" type="text/css">
	</head>
	<body class="">
	<section id="nav-container" class="right">
	<nav class="right"></nav>
	<nav class="left"></nav>
	</section>
	<script type="text/javascript" src="js/nav.js"></script>
	</body>
	</html>