swipe-left menu

by mmalex

HTML

<div class="container">
  <div id="menu" class="menu">
    
  </div>
</div>

CSS

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: whitesmoke;
  overflow: hidden;
}
.menu {
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  width: 150px;
  background: lightgray;
  box-shadow: 1px 0px 25px 5px rgba(0,0,0,0.1);
}

JavaScript

var menu = document.getElementById("menu");
menu.style.left = "0px";

var pressed = false;
var startX, startY;
menu.addEventListener('mousedown', function(e) {
  menu.style["-webkit-transition"] = "initial";
  menu.style.transition = "initial";

	pressed = true;
  startX = e.clientX;
  startY = e.clientY;
});

var mouseUpHandler = function(e) {
  if (pressed) {
    menu.style["-webkit-transition"] = "left 0.1s ease-out";
    menu.style.transition = "left 0.1s ease-out";

  	pressed = false;

    var x = e.clientX - startX;
    var y = startY - e.clientY;
    if (x>-150/2) {
      x = 0;
    }
    if (x<-150/2) {
    	x = -150;
    }

    menu.style.left = x + "px";
  }
};

menu.addEventListener('mouseleave', mouseUpHandler);
menu.addEventListener('mouseup', mouseUpHandler);

menu.addEventListener('mousemove', function(e) {
  if (pressed) {
    var x = e.clientX - startX;
    var y = startY - e.clientY;
    if (x>0) {
      x = 0;
    }
    console.log(x);
    menu.style.left = x + "px";
  }
});