HTML & CSS & Javascript

<div id="open_menu_id">Click here</div>
<div class="container">
	<div id="menu_id" class="menu_hidden">
		<div class="menu_item">Voce1</div>
		<div class="menu_item">Voce2</div>
		<div class="menu_item">Voce3</div>
		<div class="menu_item">Voce4</div>
		<div class="menu_item">Voce5</div>
		<div class="menu_item">Voce6</div>
	</div>
</div>

.container{
	position:relative;
	width:100%;
	min-height:100%;
	height:auto;
	overflow:hidden;}
.menu{
	position:absolute;
	left:0;
	width:60%;
	opacity:1;
	-webkit-transition-duration: 0.5s; /*Safari*/
	transition-duration: 0.5s;}
.menu_hidden{
	position:absolute;
	z-index:-1;
	left:-60%;
	width:60%;
	opacity:0;
	-webkit-transition-duration: 0.5s; /*Safari*/
	transition-duration: 0.5s;}

function openMenu()
	{
	document.getElementById("menu_id").className="menu";
	document.getElementById("open_menu_id").removeEventListener("click", openMenu);
	document.getElementById("open_menu_id").addEventListener("click", closeMenu);
	}
function closeMenu()
	{
	document.getElementById("menu_id").className="menu_hidden";
	document.getElementById("open_menu_id").removeEventListener("click", closeMenu);
	document.getElementById("open_menu_id").addEventListener("click", openMenu);
	}
document.getElementById("open_menu_id").addEventListener("click", openMenu);