Blog Bugginho Academy

Menu Lateral com CSS3

Olá pessoal! Neste artigo irei demonstrar como criar um menu lateral para um site de forma simples com CSS, utilizando das ferramentas de transição e animação em conjunto com algumas linhas de código JavaScript.

Este será o nosso resultado final:

Menu lateral feito com CSS

1º passo: Criando o arquivo

Crie um arquivo com a extensão .html em um diretório de sua escolha e adicione o seguinte código:

Este arquivo HTML contém uma estrutura básica de tags em conjunto com a biblioteca jQuery, que iremos utilizar mais adiante.

2º passo: Criando o cabeçalho da página

Agora iremos criar um cabeçalho simples para colocar o link que chamará o menu lateral. Para isso insira o trecho de código a seguir dentro da tag <body> , antes da tag <script> , do arquivo HTML:

E também adicione o seguinte trecho de CSS dentro da tag head  para estilizar a classe  sandwich-wrapper e o header  que utilizamos:

Se tudo ocorreu certo, você deverá ter um resultado semelhante a este:

Resultado parcial

3º passo: Criando o menu lateral

Adicionaremos a estrutura do menu lateral. Para isso coloque o seguinte código após a tag  </header> :

E também adicione as seguintes regras CSS dentro da tag style :

Agora você deverá ter o seguinte resultado: (O download da imagem encontra-se disponível no fim do post. Caso você não tenha a imagem, aparecerá um fundo azul claro.)

Resultado parcial

 

4º passo: Animando o menu lateral

Já temos o nosso menu aparecendo, porém temos que escondê-lo e só mostrá-lo quando o usuário clicar no nosso ícone. Para isso utilizaremos a propriedade  transform do CSS, que será responsável pelo movimento do menu.
Primeiramente adicione a seguinte regra dentro da tag  <style> :

Esta regra implica que o menu lateral será deslocado 255 pixels para a direita quando a classe  active estiver presente.

Agora iremos esconder o nosso menu, que deverá ficar oculto por padrão. Para isso, altere a regra da classe  .left-menu para a seguinte:

Observe que todas as propriedades mantiveram seus valores, com exceção da  left , onde colocamos um valor negativo (-270px) que será responsável por deslocar para a esquerda o nosso menu, escondendo-o.

Agora o nosso menu está oculto e pronto para ser animado. Para isso basta adicionarmos a classe  active a ele quando o ícone for clicado, e isso será feito através de JavaScript com auxílio do jQuery.

Após a tag  </script> , adicione o seguinte trecho de código:

Neste trecho, estamos explicitando que quando o ícone for clicado, a classe  active será adicionada ao menu lateral. Agora se você salvar seu arquivo e abrí-lo no navegador, poderá ver o menu sendo animado ao clicar no ícone!

4º passo: Toques finais

Já conseguimos montar o menu e animá-lo, agora só falta fechá-lo e dar o toque final!

Uma técnica amplamente utilizada nos websites é o chamado “glass pane” (i.e. “painel de vidro”), que nada mais é do que um fundo semitransparente de cor preta para dar destaque ao menu e “separá-lo” da página principal. Para isso, adicione a seguinte tag HTML após a tag  </header> :

E também adicione a seguinte regra CSS dentro da tag <style> para estilizar o nosso glass pane:

Porém, o nosso glass pane deverá ser ativado apenas após a abertura do menu lateral. Para isso, adicione também a seguinte regra CSS dentro da tag  <style> :

Também será necessário alterar o nosso script, a fim de mostrar/esconder tanto o menu lateral quanto o glass pane. Substitua a tag  <script> que criamos anteriormente por esta:

Pronto! Aí está o nosso menu lateral! Para abrí-lo basta clicar no ícone da barra de navegação, e para escondê-lo basta clicar no glass pane. Se você quiser também pode colocar um ícone para fechar o menu dentro dele próprio, basta remover a classe  active no evento de clique do elemento!

E para isso usamos exclusivamente a animação do CSS, apenas utilizando JavaScript para adicionar/remover classes.

Gostou? Tem alguma dúvida? Sugestões? Deixe seu comentário!

Valeu pessoal! Até a próxima!

Download da imagem utilizada: https://newevolutiondesigns.com/images/freebies/google-material-design-wallpaper-9.jpg

Victor Hugo

23 anos, graduado em Engenharia da Computação pela FIAP (Faculdade de Informática e Administração Paulista). Analista de Sistemas na TOTVS Juritis.
Programador Front-End e Back-End, trabalhando atualmente em desenvolvimento web com .NET C# e JavaScript.

1 comentário

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.