Projeto de design responsivo aplicando o conceito de Mobile First utilizando CSS3 puro (sem framework) e consumindo biblioteca o JQuery para exibir e ocultar o menu mobile.
Mockup obtido em Freepik
Importanto o JQuery.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
Foram usados os métodos show()
e hide()
para o menu mobile.
<script>
$(".btn-menu").click(function () {
$(".menu").show(); //Exibe os itens do menu.
});
$(".btn-close").click(function () {
$(".menu").hide(); //Oculta os itens.
});
</script>