Neste artigo vamos criar passo-a-passo um menu retrátil super versátil que, com apenas algumas linhas de modificação, poderá ser utilizado na horizontal, vertical, sobrepondo ou empurrando o conteúdo de um site. Veja ainda como evitar os malditos bugs problemas mais comuns deste tipo de navegação.
Mini bibliotecas
Uma das principais vantagens de escrever um HTML semântico e bem organizado é a versatilidade. Com um mesmo código é possível criar diversas variações de estilo utilizando apenas CSS. Na verdade muitas estruturas acabam se repetindo, embora visualmente diferentes. Isto acontece geralmente com formulários, rodapés e navegação. É o motivo pelo qual os frameworks estão tão populares ultimamente. Mas, muitas vezes, não precisamos de algo tão massivo e complexo quanto uma framework para tarefas simples. É algo como tentar acertar uma formiga com uma bazuca! É muito mais prático e funcional construir uma pequena biblioteca pessoal de snippets – pequenos trechos de código. O formato não importa muito. Pode ser que você salve comentários no seu software de edição favorito, escreva em pequenos blocos de notas no seu computador, envie e-mails para si mesmo ou até mesmo utilize alguma ferramenta como Snippets.me ou Snippi. Seja como for ter algumas cartas na manga é útil na hora de entregar aquele projeto para ontem e recuperar horas de sono. Este menu é uma das minhas.
HTML
O HTML do menu é bem simples. Vamos usar uma div com a classe “drop”. Esta div será necessária para as versões do menu em que ele irá sobrepor o site. Ela irá funcionar como uma sustentação para a navegação. Nas demais versões, ela pode ser deletada.
Dentro da div “drop” criamos uma nav e, como um menu é sempre uma lista de links, vamos usar as tags ul e li.
No exemplo, o meu menu ocupa 100% da tela mas eu gostaria que os links ficassem dentro de um container centralizado. Para isso, adicionei uma div com a classe wrap e margin automática.
No final, o HTML ficou assim:
Para ter um elemento servindo de exemplo visual e ser sobreposto ou empurrado pelo meu menu, coloquei apenas uma imagem. Mas, pense nela como todo o conteúdo do site, okay?
Hoje vamos criar quatro menus utilizando este mesmo html como um coringa.
Aqui já começamos a ter diferenças de um menu para o outro. Trabalharemos com media-queries que reordenarão os elementos de acordo com o tamanho do viewport do usuário, ou seja, da janela do browser. Para o exemplo, criei um media-querie com a max-width de 800px. É a partir desta largura que o menu se colapsa em apenas uma âncora. Altere este valor de acordo com o seu projeto, é claro.
Hoje vamos desenvolver dois tipos de menus horizontais diferentes. Um empurrará todo o site para baixo ao abrir ([demo][3]).
E o outro, se abrirá sobre o site ([demo][4]).
Note que entre os dois htmls existe apenas uma classe diferente: a div “drop”. Esta divisão extra está apenas no segundo exemplo no menu que passa por cima do conteúdo do site. Ela terá uma altura fixa, que será a altura do meu menu quando fechado. Quando ele se abrir, a div que sustenta nosso menu continuará do mesmo tamanho, fazendo com que os demais elementos sobreponham o resto do site.
Primeiro, vamos ao CSS dele fechado. Como é só uma lista, eu apenas usei o parâmetro “inline-block” para que todos os itens se alinhem um ao lado do outro. Os demais parâmetros, são apenas estilização do menu. Não coloquei muitas coisas em termos visuais. Não é para ser bonito. A idéia é ter uma carcaça pronta para receber o SEU design. Eu coloquei na minha nav uma “position: fixed” para que o menu fique sempre à vista do usuário, e de fácil acesso. Mas, você não terá problemas se quiser trabalhar com uma posição relativa ou absoluta. Isso irá variar de acordo com o seu projeto.
Outra coisa importante é o parâmetro “nav-toggle”. Ele será o gatilho para abrir e fechar o meu menu, tanto em sua versão vertical quanto na horizontal. Ele é inserido no meu HTML dinamicamente via JavaScript. No entanto, eu não quero que ele apareça quando estiver em resoluções maiores que 800px, por isso coloquei nele um “display: none” e, dentro do media-querie que irá atender viewports menores que 800px ele tem o “display: block”.
Veja como ficou o CSS do menu na horizontal que empurrará o site para baixo:
As principais mudanças para telas menores são o .nav-toggle que agora é visível nas versões menores que 800px, a lista que deixa de ser “inline-block” para ser apenas “block” e a .nav, que antes tinha a posição fixa e agora é relativa.
Na versão em que o menu irá passar por cima do site, defina uma altura para a classe .drop no media querie equivalente ao menu fechado, posição relativa e o z-index maior que os outros elementos para que ele possa se sobrepor. Veja o código:
Uma maneira interessante de testar o menu funcionando antes de aplicar o JavaScript é modificar a altura da .nav para “auto” ou a altura que você quer que o seu menu tenha quando estiver aberto. Isso fará com que, ao redimensionar o seu browser, o menu apareça como se estivesse aberto. No entanto, para o nosso exemplo, vamos usar a altura 0.
São dois os modelos de menu vertical:
Um abrirá a partir da esquerda empurrando todo o site para a direita ao abrir ([demo][5]).
E o outro, se abrirá sobre o conteúdo ([demo][6]).
Primeiro, vamos ao CSS do menu quando o viewport for maior que 800px. Neste exemplo, deixei o menu em um background escuro e ocupando 20% do viewport. Assim, o conteúdo, ocupará os 80% restantes. Como os itens da minha lista não ficarão mais uns aos lados dos outros, neste caso eu a mantive o display “block” desde o CSS desktop. E, também deixei o gatilho com “display:none” e a minha imagem com 80% de largura.
Quanto ao CSS para telas menores o primeiro ponto é que, neste exemplo, trabalharemos com uma largura fixa para o menu. Deixei o padrão de 175px de largura. Usei esta medida pela segurança de não ficar muito grande em smartphones, já que o tamanho mais comum é de 320px de largura com ele em pé, 175px é uma medida segura para trabalharmos.
Minha sidebar terá também a posição absoluta no exemplo. Isso serve para que ela possa “passar por cima” do conteúdo do site sem problemas. Na versão em que o site irá caminhar para o lado, faremos isso pelo JS.
E, não podemos esquecer, do gatilho que irá ativar o nosso menu. Assim como no exemplo anterior, usei um item de classe .nav-toggle que será adicionado dinamicamente pelo Javascript. Deixei ele com o display:none fora do media-query e ele irá ter a posição absoluta quando o viewport for menor que 800px. Deixei o topo dele em 0 e ele será alinhado à partir da borda direita dele. Usei, neste caso, um valo negativo. Assim, ele ficará visível quando o meu menu estiver fechado, para ser clicado e, ao abrir, caminhará junto com o meu menu para ser clicado novamente e fecha-lo.
Javascript
Como o nosso código utiliza jQuery a primeira coisa a fazer é chamar a biblioteca.
Menus na Horizontal
Para os dois casos do menu na horizontal, tanto o que empurra quanto o que sobrepõe o site, usei exatamente o mesmo JS. O que irá garantir que ele irá sobrepor o site é a classe .drop . Quando ela estiver com uma altura definida, ela será como um suporte para o menu e fará com que tudo passe por cima dos outros objetos do site. Quando ela não existir, ou não estiver com uma altura definida ela irá aumentar de tamanho, empurrando os demais elementos para baixo.
A primeira coisa a fazer é utilizar addClass para colocar a classe “fechada” no menu. Esta classe será retirada quando o menu for aberto e irá aparecer quando ele fechar novamente. Servirá como um elemento para indicar ao meu JS o que irá fazer.
Em seguida, utilize o comando de jQuery after para adicionar o gatilho para o menu. Caso queira que ele fique antes do menu, você pode substituir o “after” por “before”.
A animação acontece através dos eventos “click” e “animate”.
O JavaScript fica assim:
A mágica é a seguinte: quando o usuário clica no gatilho do menu (no caso, o .nav-toggle), ele pega a altura da minha lista de links. Depois, ele faz uma verificação na minha .nav . Se ela possuir a classe “fechada”, ela irá animar aumentando a altura dela e mostrando o menu. Caso esta classe não exista, ele diminui a altura escondendo o menu. Tudo isso na velocidade de 200 milisegundos.
Escolhi este método por uma questão de praticidade. Existem outras maneiras de realizar o mesmo processo. Ao invés de adicionar uma classe, é possível, por exemplo, verificar a altura da .nav. Se for maior que 0px, significa que ela estava aberta e, ao clicar, será fechada. Se for igual a 0, é porque ela está fechada e precisará ser aberta.
E uma dica!
Para finalizar, vamos nos livrar de um bug chato que normalmente acontece: ao aumentar a tela para os valores maiores que o nosso media querie (no caso, 800px), o menu poderá ficar com a altura que ele estava quando aberto, e isso obviamente desalinha todo o layout.
Resolver isso é bem fácil. Podemos fazer com que o nosso JS verifique, ao redimensionar a janela, qual é o tamanho do viewport. Se for maior que 800, ele volta a altura que deveria ter originalmente. Se for menor, ele simplesmente se fecha ou mantém a altura que estava quando aberta. No exemplo, eu fiz com que ele se fechasse. Veja como ficou o JS inteiro:
Menu Vertical
Neste caso, a verificação da largura do viewport acontece em dois momentos. Uma quando o usuário redimensionar o browser e outra no momento que o documento é aberto. Em ambos, a condição é a mesma: se o tamanho da janela for menor que 800px, ele adiciona a classe “side-fechado”, o gatilho “nav-toggle” que irá animar o menu e colocar a posição dele como -175px à esquerda, o que garante que o menu ficará fechado logo após o usuário redimensionar o browser. Se for maior que 800px a posição à esquerda fica 0.
(Lembrando que estas medidas de largura são subjetivas e devem ser alteradas a cada projeto.)
O JS ficou assim:
Para animar o menu, vamos criar uma função de nome “menu”. Nesta função, ao clicar no gatilho “.nav-toggle”, acontecem duas coisas: verificação da existência da classe “side-fechado” e animação do menu. Se possuir, o JavaScript anima a navegação para 0px da borda esquerda do menu. Caso não possua (o que indica para nós que o menu está aberto) a navegação volta para os -175px negativos.
O JS fica assim:
Neste exemplo, ele está sobrepondo o conteúdo do site. Mas, eu posso fazer com que ele empurre o site para a direita quando surgir e para a esquerda quando fechar. Para isso, eu coloco um animate no conteúdo do site também (no exemplo, o meu objeto de classe “.foto”). O JS fica assim:
Agora, é só chamar a função “menu” depois das verificações de tamanho da janela. O JS completo fica assim:
Demos
Você pode fazer aqui o [download dos arquivos][7] com os exemplos criados ou brincar com as demos online no Codepen.
– [Navegação 1 – Menu horizontal empurrando o conteúdo para baixo.][3]
– [Navegação 2 – Menu horizontal passando sobre o conteúdo.][4]
– [Navegação 3 – Menu lateral empurrando o conteúdo para o lado.][5]
– [Navegação 4 – Menu lateral passando sobre o conteúdo.][6]
Conclusão
A navegação é sempre uma parte fundamental de qualquer layout. Cuidar para que ela apareça da maneira mais otimizada possível, não apenas em aparelhos mobile, mais em dispositivos com o viewport reduzido não é mais um luxo, mas uma necessidade. Existem algumas outras abordagens até mesmo utilizando apenas CSS3. É importante conhecer diversas soluções para adequar as necessidades de cada projeto. Reaproveitando trechos de código como este podemos garantir que o processo de desenvolvimento seja ágil e preciso, sem sacrificar qualidade, semântica e a experiência do usuário.
[3]: https://codepen.io/daniauthors: Dani Guerrato
paid: true/pen/fbgLl “Navegação Responsiva 1”
[4]: https://codepen.io/daniauthors: Dani Guerrato
paid: true/pen/iAeyx “Navegação Responsiva 2”
[5]: https://codepen.io/daniauthors: Dani Guerrato
paid: true/pen/EKylp “Navegação Responsiva 3”
[6]: https://codepen.io/daniauthors: Dani Guerrato
paid: true/pen/wcCEK “Navegação Responsiva 4”
[7]: https://cl.ly/0E0C3O0j2r2T “Navegação Responsiva – Demo”