How to make a menu-div appear when clicked on a button?

Question

I’m trying to make a menu similar to this:

Click here to see the example menu

What I did, I put a div over the other using the position:absolute and hid the div responsible for the menu with a display:noneand in JS I am trying to apply an effect that makes it appear when clicked on a button, as well as in the example of the site. However, without success.

It doesn’t necessarily have to be with JS. It can be with JS, Jquery, CSS3 (I think this can be done with it too) etc.

Anyway, is there a "better way" to do this? Where am I going wrong?

	function exibe(){
		

		document.getElementById('nav').body= ??
	}

		html, body{
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}

		#principal{
			position: absolute;
			width: 100%;
			height: 100%;
		}

		#nav{
			display: none;
			position: absolute;
			height: 100%;
			z-index: 10;
		}
		#menu{
			
			z-index: 11;
			position: absolute;
		}

	<div id="principal">			
			<button id="menu" onclick="exibe()"> MENU </button>	
			<img src="http://i.stack.imgur.com/fr1br.png"  style="width:100%; height:100%">
	</div>


	<div id="nav">
		<img src="http://i.stack.imgur.com/UQXbV.png"  style="height:100%">
	</div>

Answer 1

look, to make a menu off-canvas, you will need two divs, one for the conteudo that will occupy the whole screen and another for the menu, the menu will be hidden in a non-visible area.

To hide the Nav, we will use position: absolute, attribute a negative value to left, this must be equal to or greater than width of the same, to display the menu, just update the value of the left for 0px.

To make the animation, we can use a transition.

var nav = document.getElementById("nav");
var showMenu = document.getElementById("showMenu");
var hideMenu = document.getElementById("hideMenu");
showMenu.addEventListener("click", function () {
  nav.classList.add("show");
});

hideMenu.addEventListener("click", function () {
  nav.classList.remove("show");
});

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;  
}

#conteudo {
  position: absolute;
  top: 0px;  
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: whitesmoke;
  overflow: auto;
}

#nav {
  position: absolute;
  top: 0px;
  left: -255px;
  bottom: 0px;
  width: 250px;  
  background-color: gainsboro;
  box-shadow: 0px 0px 10px black;
  
  transition: left 0.5s linear;
}

#nav.show {
  left: 0px;
}

<div id="conteudo">
  <input id="showMenu" type="button" value="Exibir Menu" />
</div>
<div id="nav">
  <input id="hideMenu" type="button" value="Ocultar Menu" />
</div>