Script for side menu

Question

Does anyone know a script for making a responsive side menu that looks like the one on Badoo?? When you are viewing the site on a device with large screen the menu appears with all the options and qd is on a smaller screen the menu hides showing only icons with the options. Thanks in advance.

Answer 1

You can try using the materialize, it is fully 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 class hide-on-med-and-down hides the large menu on small screens while the class hide-on-med-and-up hides small menu on large screens (Source).

A Bonus (more like a tip):

I recommend the use of this plugin because it makes the work much easier (I use it myself a lot), but if you just want to do 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 I’ve helped, any doubts comment.

Answer 2

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

Link with some template https://getmdl.io/templates/index.html