Menu Mobile Simples

HTML

Para fazer esse menu mobile simples você precisa de pelo menos 3 estruturas:

1. .side-menu: o menu em si;
2. .page-wrapper: todo o restante do site;
3. .menu-toggle: um botão para mostrar e esconder o menu.

<!-- Side Menu -->
<nav class="side-menu">
  <ul>
    <li><a class="item" href="#">Item 1</a></li>
    <li><a class="item" href="#">Item 2</a></li>
    <li><a class="item" href="#">Item 3</a></li>
    <li><a class="item" href="#">Item 4</a></li>
  </ul>
</nav>

<!-- Page Wrapper -->
<div class="page-wrapper">
  <header class="fixed-header">
    <h1 class="logo">Site Name</h1>

    <!-- Menu Toggle -->
    <a class="menu-toggle" href="#">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </a>
  </header>

  <div>
    <h2>This is the page content</h2>
    <p>Everything else should come here.</p>
  </div>
</div> <!-- / Page Wrapper -->

É possível fazer isso de pelo menos duas maneiras bem parecidas:

1. O .side-menu fica escondido por trás do conteúdo principal da página, o .page-wrapper. Ao clicar no botão, o conteúdo da página é movido para um dos lados até revelar completamente o menu.

2. O .side-menu fica é movido para a esquerda até sair de vista utilizando transform: translate3d(). Ao clicar no botão, o conteúdo da página se move da mesma forma que no caso anterior, mas o menu também se move na mesma direção para ser revelado.

Vamos fazer das duas formas, que são bem parecidas. A estrutura HTML e JS é a mesma.

CSS

O CSS é a parte mais extensa na criação do menu.

1. Menu escondido atrás do conteúdo

Vamos começar com o primeiro tipo de menu. Os estilos essenciais para o funcionamento dele são:

body {
  overflow-x: hidden;
}

.page-wrapper {
  position: relative;
  background: white;
  z-index: 1;
}

.side-menu {
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  
  height: 100%;
  width: 250px;
}

O que está acontecendo aqui é o seguinte:

Em body:

• Utilizamos overflow-x: hidden para impossibilitar a rolagem acidental para os lados (rolar para os lados nunca é agradável). Como o menu vai empurrar o conteúdo para o lado, uma barra de rolagem apareceria sem essa propriedade.

Em .page-wrapper:

• A posião de .page-wrapper é relative para que possamos aplicar o z-index. Ele pode ser qualquer valor, desde que seja maior que o z-index do .side-menu.
• O fundo de cor branca deixa o menu lateral invisível. Afinal, ele está logo atrás do conteúdo principal da página!

Em .side-menu:

• position: absolute faz o menu sair do fluxo normal da página e pode ser manipulado com as propriedades top, left, etc, que nesse caso estão fixando o menu no canto superior esquerdo.
• overflow-y: auto fará uma barra de rolagem aparecer no eixo y, mas apenas quando necessário. Deixa o menu mais bonito se a rolagem não for necessária.
• height: 100% faz que o menu ocupe todo o espaço vertical abaixo dele, não só o que ele precisa, que é o padrão.
• width define a largura do menu. Escolha o valor que permita uma boa visibilidade.

Agora vamos adicionar o CSS que fará o menu se mover:

.menu-active .page-wrapper {
  transform: translate3d(250px, 0, 0);
}

É bem simples:

• O translate3d em .menu-active .page-wrapper moverá todo o conteúdo da página em 250px para a direita, mostrando todo o menu, que também tem 250px. Sim, esses dois valores precisam ser iguais.

2. Menu escondido à esquerda do conteúdo

body {
  overflow-x: hidden;
}

.page-wrapper {
  position: relative;
  background: white;
}

.side-menu {
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  
  height: 100%;
  width: 250px;

  transform: translate3d(-100%, 0, 0);
}

O funcionamento aqui é bem similar ao anterior. As propriedades removidas em comparação com a forma anterior realmente não são necessárias aqui. Só há uma adição:

• transform: translate3d(-100%, 0, 0) faz que o menu se mova 100% para a esquerda. Ou seja, ele é movido exatamente a distância necessária para sumir da tela.

O background continua porque com ele a animação parece ser mais suave.

Agora para o CSS que que fará tudo se mover:

.menu-active .page-wrapper {
  transform: translate3d(250px, 0, 0);
}
  
.menu-active .side-menu {
  transform: translate3d(0,0,0); 
}

Aqui temos uma adição:

• o translate3d em .menu-active .side-menu faz o menu voltar à posição original, já que ele estava fora da tela por conta do transform anterior;

Tudo terminado no CSS. Só falta adicionar o JS.

Javascript

Agora para fazer o clique no botão .menu-toggle mostrar e esconder o menu precisaremos utilizar JavaScript, mas não se preocupe, é bastante simples.

var menuToggle = document.querySelector('.menu-toggle');

menuToggle.addEventListener('click', function(e) {
  document.body.classList.toggle('menu-active');
  e.preventDefault();
});

Sim, é só isso. Esse código faz o seguinte:

1. Captura o botão que ativa o menu (de classe .menu-toggle);
2. Fica atento a qualquer clique no botão;
3. Adiciona ou remove a classe .menu-active ao body se ela estiver presente ou não.

Pronto, é só adicionar o CSS e o JS no HTML e ver tudo funcionando. Deve estar bem feio porque não há estilos para embelezar a página, mas se quiser ver um exemplo estilizado, é só ver esse pen.