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

Question

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

Navigation

#1 by (1 votes)

0

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

What I did, I put a div over the other using position:absolute and hid the div responsible for the menu with a display:none and in JS I'm trying to apply an effect that causes it to be displayed when clicked button, just like the site example. However, to no avail.

It does not necessarily have to be with JS. It can be with JS, JQuery, CSS3 (I believe 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>

javascript jquery css3

asked by anonymous 01.02.2016 / 15:19

1 answer

How to find out the current $ location Can I make more than 1 insert using PDO?

score 1 · Accepted Answer

look, to make a menu off-canvas , you will need two div s, one for conteudo that will occupy the entire screen and another for menu , the menu will be hidden in an area not visible.

To hide the nav, we will use position: absolute , assign a negative value to left , it must be equal to or greater than width of it, to display the menu, just update the value of left to 0px.

To do 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>