Script for side menu

You can also use Google's Material Design Lite. On your template page you have an example with a responsive side menu.

Link with some template link

You can try using materialize , it's totally responsive and with options to create that responsive menu you want.
For example, you could make two menus (one for large screens and one for small screens):

<div class="menu-tela-grande hide-on-med-and-down">...</div>
<div class="menu-tela-pequena hide-on-med-and-up">...</div>

In the Materialize plugin, the hide-on-med-and-down class hides the large menu on small screens, while the hide-on-med-and-up class hides the small menu on large screens ( Source ).

A bonus (it's more for tip):

I recommend using this plugin because it makes the job a lot easier (I use it a lot myself), but if you just want to make the same menu, you can use the same concept with @media-queries :

<div class="menu-tela-grande">...</div>
<div class="menu-tela-pequena">...</div>

And in css:

.menu-tela-grande {
   // ...Seu estilo para este menu
}
.menu-tela-pequena {
   display:none; // Fica escondido por padrão
   // ...Seu estilo para este menu
}

@media only screen and (max-width: 800px) { // Quando a tela for 800px ou menor
     .menu-tela-grande {
        display:none; // Esconde o menu grande
     }
     .menu-tela-pequena {
        display:block; // Mostra o menu pequeno
     }
}

I hope to have helped, any doubt comments.