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:

<button class="c-button js-offcanvas-trigger">Menu</button>

<div class="c-offcanvas-menu js-offcanvas-menu">
  Conte&uacute;do do menu off-canvas...
</div>

Conteúdo do menu off-canvas...

</div>

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):

.c-offcanvas-menu {
  align-items: center;
  background-color: #363636;
  color: #fcfcfc;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  transform: translateX(-100%);
  transition: all 235ms cubic-bezier(.95, .05, .795, .035);
  width: 100vw;
}

.c-offcanvas-menu {

align-items: center;

background-color: #363636;

color: #fcfcfc;

display: flex;

height: 100vh;

justify-content: center;

left: 0;

position: fixed;

top: 0;

transform: translateX(-100%);

transition: all 235ms cubic-bezier(.95, .05, .795, .035);

width: 100vw;

}

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”.

.c-offcanvas-menu.is-active {
  transform: none;
  transition: all 205ms cubic-bezier(.19, 1, .22, 1);
}

.c-offcanvas-menu.is-active {

transform: none;

transition: all 205ms cubic-bezier(.19, 1, .22, 1);

}

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:

const trigger   = document.querySelector( '.js-offcanvas-trigger' )
const offcanvas = document.querySelector( '.js-offcanvas-menu' )

trigger.addEventListener( 'click', toggleMobileMenu )

function toggleMobileMenu() {
  offcanvas.classList.toggle( 'is-active' )
}

const trigger = document.querySelector( '.js-offcanvas-trigger' )

const offcanvas = document.querySelector( '.js-offcanvas-menu' )

trigger.addEventListener( 'click', toggleMobileMenu )

function toggleMobileMenu() {

offcanvas.classList.toggle( 'is-active' )

}

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!