Como fazer menu off canvas da maneira mais fácil

Sabe como fazer um menu off-canvas? E um menu off canvas da maneira mais simples e eficiente possível? São coisas bem diferentes, hã? ;)

Ir para o artigo

Você entra em um site através de seu dispositivo móvel. Em um canto superior, vê 3 risquinhos que todo mundo chama “menu hambúrguer” — pessoalmente, prefiro um duplo, o que daria em 4 risquinhos, mas temos que respeitar as convenções.

Você clica nesse ícone semi estranhoso e um menu desliza, ocupando todo o espaço em tela! Parabéns: você acabou de acionar um menu off canvas!

Um off-canvas menu é o menu que fica fora da área útil do site ou viewport (“off” do “canvas”) e, através de algum trigger que o irá acionar, aparece em tela, trazendo conteúdos importantes de navegação e, não raramente, outros tipos de interação e/ou informações.

Dentre as muuuitas maneiras de se conseguir um menu off canvas com CSS, neste tutorial você irá aprender a mais fácil delas. A que vai garantir um menu offcanvas rápido, elegante e profissa com pouquíssimas linhas de código.

HTML

Evidentemente, haverá muito mais código HTML em seu site do que o necessário para se fazer um menu off-canvas. Mas foquemos no essencial para em prol da didática.

Neste rumo, o código HTML para o menu off canvas é tão simples quanto:

Quer dizer, só o que é preciso é do conteúdo do menu, propriamente dito, e um acionador/trigger qualquer para fazer com que a interação aconteça.

CSS

Novamente, em prol da objetividade do tutorial, omitamos o código necessário para estilizar o botão acionador do menu. Você pode fazê-lo como quiser (ou demandar o projeto) que não fará muita diferença.

O que realmente importa, aqui, é como o elemento c-offcanvas-menu deve ser estilizado para que cumpra:

  • Ocupar toda a dimensão da viewport (largura e altura)
  • Ficar visível ou invisível sob demanda
  • Estar sempre à disposição, independentemente do scroll da página

Para tanto, usemos o seguinte código CSS (ligeiramente diferente do mostrado no vídeo para ficar mais apresentável e condizente a cenários do mundo real):

O grande segredo da técnica é transform: translateX(-100%), que faz com que o menu fique fora da tela.

Mas, uma vez acionado, é preciso que ele apareça. Então, se o valor de transform é responsável por ele ficar fora, o que é preciso? Simples: “resetar” e garantir que ele fique em sua posição “original”.

Ou seja, quando, no elemento, também houver a classe is-active, a transformação cessará de surtir qualquer efeito, o que, em conjunto com o transition (com um bom easing), garantam o efeito slide.

JavaScript

Então, agora só falta controlar as interações para que a classe is-active seja colocada ou retirada de .c-offcanvas-menu conforme seja necessário.

O código JavaScript para isso é tão simples quanto:

O “mistério”, aqui, é garantir que a classe is-active seja colocada e retirada do elemento alternadamente, conforme cliques no trigger js-offcanvas-trigger.

Explicando melhor: caso o elemento js-offcanvas-menu não tenha a classe is-active, ela será adicionada no clique do trigger; caso tenha, ela será retirada.

Conclusão

Existem diversas técnicas para se conseguir o efeito do menu off-canvas. Dificilmente, você irá encontrar uma mais simples e que exija tão pouco código para funcionar.

Evidentemente, é necessário arranjar os complementos necessários, como ajustar breakpoints para exibição do menu/interações, harmonizar com o “menu desktop” etc., mas, essencialmente, é dessa forma que se faz o menu off-canvas mais simples que você respeita!

E-book que explica os 3 conceitos fundamentais de CSS para você entender de uma vez por todas e parar de brigar com CSS!

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.