Neste tutorial iremos aprender a criar o efeito “Show/Hide”em um menu sem a necessidade de plugins, apenas com CSS e JS.

o HTML e o CSS são bem simples, você só precisa saber o básico para seguir em frente sem nenhum tipo de duvida. Primeiro você deve fazer o elemento onde vai acontecer o click do usuário para esconder ou mostrar o menu.
Espero que gostem!
Vamos lá!

HTML

	<div class="menu-trigger" id="menu-trigger">
		<div></div>
		<div></div>
		<div></div>
	</div>
<nav class="menu-hidde" id="menu-hidde">
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ul>
</nav>

Aqui nós resetamos algumas configurações de estilo do navegador:

*{
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
color: #000;
}

 

o seguinte CSS vai fazer com que o seu menu trigger tenha essa aparência

#menu-trigger {
width: 30px;
height: 20px;
position: absolute;
top: 10px;
margin-right: 20px;
right: 0;
cursor: pointer;
}

.menu-trigger div {
width: 30px;
height: 4px;
background: rgb(51, 51, 51) none repeat scroll 0% 0%;
margin-top: 3px;
}

Agora nós vamos estilizar o menu  que vai ter o efeito hide/show, sinta-se livre para mudar o estilo do CSS, só tenha cuidado para não alterar as propriedades que são indispensáveis para o bom funcionamento do script

.menu-hidde {
background: #333 none repeat scroll 0% 0%;
width: 185px;
height: 100%;
position: absolute; /*necessária para o funcionamento*/
box-shadow: 1px 2px 3px #DDD;
left: -100%;  /*é com essa propriedade que o menu fica escondido a esquerda*/
transition: left .5s;
}

.menu-hidde li {
color: #fff;
font-size: 20px;
padding: 18px;
cursor: pointer;
}

.menu-hidde ul {
position: absolute;
top: 31px;
}

 

vamos ao nosso JavaScript!

É bem simples, ate um iniciante pode entender com facilidade, primeiro nós pegamos o id do menu-trigger onde vai ocorrer o click do usuário, depois nós usamos o método EventListener para adicionar um evento a um determinado  elemento do HTML, o evento seria o click, toda vez que o usuário clicar essa função vai ser chamada. Agora vamos pegar o id do menu a ser escondido/mostrado, para que tudo funcione corretamente nós precisamos usar uma declaração condicional, iremos usar um IF e assim achar uma condição que satisfaça o script, para esconder ou mostrar o menu dependendo da ação do usuario

var veri = 1;
var trigger = document.getElementById('menu-trigger').addEventListener("click",function(){
var menu = document.getElementById('menu-hidde');
if (veri == 1) {
menu.style.left = "0px";
veri = 0;
}else{
menu.style.left = "-100%";
veri = 1;
}
})

Veja na integra o exemplo no Codpen