MangaCode - Desenvolvimento & Cursos Web

Desenvolvimento Web

Criando um Menu Mobile com HTML5, CSS3 e jQuery

  • Autor: Bernardo Corrêa
  • Publicado em: 06/12/2018 18:48h
  • Visualizado por: 4545 pessoas

Salve, pessoal! Você já teve vontade de aprender a fazer aquele Menu muito comum em aplicativos de celular? Então hoje eu vou ensinar para você como criar o seu próprio menu mobile do zero, utilizando somente HTML5, CSS3 e um pouco (quase nada) de jQuery. Vem comigo!

Vamos direto ao ponto logo de cara, a primeira coisa que você tem que fazer é criar a estrutura base do HTML, que é formada por um conjunto de links, que no nosso exemplo serão incorporados pela tag nav, identificados pela classe menu-mobile. Além disso, teremos também o nosso botão que ativará o a visualização do nosso menu mobile ao ser clicado, que será identificado pela classe btn-menu.

Com a nossa estrutura HTML pronta, vamos estilizar o nosso menu e nosso botão. Para isso, pegamos as classes menu-mobile e btn-menu em nosso arquivo CSS e começamos a estilização. Começamos pelo nosso menu, definindo uma posição fixa na nossa tela, aplicando também a cor vermelha (#c00), largura de 270px e uma altura de 100%, ocupando toda a altura do nosso documento. Para finalizar, colocamos a propriedade transition-duration para dar mais suavidade ao movimento de slide que irá esconder e exibir o nosso menu.

O btn-menu terá uma estilização simples, posicionaremos o mesmo por cima do menu-mobile, pois o mesmo será escondido mais tarde, deixando visível somente o botão. Portanto, aplicaremos uma largura de 45px, altura de 40px, posição absoluta e uma cor cinza quaaase preto (#333). Além disso, também colocaremos a propriedade transition-duration para trazer a suavidade de movimento.

Com as nossas estruturas HTML e CSS prontas, vamos esconder o nosso menu-mobile e deixar somente o btn-menu sendo exibido.

Chegou a hora de aplicarmos a ação que o btn-menu irá realizar ao ser clicado. Para isso, utilizaremos um script básico em jQuery que acionará uma classe chamada de btn-menu-active ao nosso documento HTML e fará com que os nossos elementos btn-menu e menu-mobile sofram alterações de comportamentos. Resumindo, ao clicar no btn-menu, o menu-mobile deverá surgir e ao clicar novamente, ele deverá se esconder. Veja como ficaria o código completo com a inclusão do script jQuery e CSS:

Muito bacana, né? Agora você já sabe como criar um menu mobile profissional e do zero, podendo aplicar em qualquer projeto que você necessite utilizar este modelo de menu.

Se você gostou dessa dica, não esquece de compartilhar com seus amigos e deixar o seu comentário para mais conteúdos como este. Deixo aquele forte abraço, e a gente se vê na próxima dica!