Menu responsivo simples (sem JS)

Todo mundo sabe que o JS revolucionou muito a forma de interagir com o site mas pouco gente saber que o CSS evoluiu muito também e sem ele não conseguiríamos ter os visual que a web tem hoje.

Um desafio legal para testar as suas capacidades é sempre sair da zona de conforto e enfrentar situações diferente para resolver diversos problemas. O meu ultimo desafio foi criar um menu simples e responsivo mas sem o fazer uso de nenhum JS. 

Na verdade foi uma tarefa até que simples. Vou mostrar o resultar e explicar como eu cheguei nele.

Para visualizar o resultado é só clicar  aqui

Como vocês podem ver não tem nenhuma magica no código. A parte mais importante está no checkbox que controla o estado do menu (aberto ou fechado). Além disso é importante prestar atenção na hierarquia do HTML. O checkbox e o container do menu precisam está no mesmo nível.

<menu>
  <label for="menu-toggle">
    <div></div>
    <div></div>
    <div></div>
  </label>
  <input type="checkbox" name="action-menu" id="menu-toggle" />
  <nav>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/home">Contato</a></li>
      <li><a href="/home">Fale Conosco</a></li>
      <li><a href="/home">Nossas Lojas</a></li>
      <li><a href="/home">Sobre a empresa</a></li>
    </ul>
  </nav>
</menu>

No HTML eu encapsulei tudo em uma tag “menu” e dentro dela está uma label ligada ao input, ou seja, quando clicar na label o checkbox ativa. No mesmo nível está uma tag nav que encapsula uma lista de links. A tag nav está com position absolute e left -100%. Quando o check box se ativa ela vai para left 0.

É importante que nav fique no mesmo nível que o input para que seja possível fazer uma ligação de irmandade no css.

Usando o acento til ” ~ ”  nos podemos meio que fazer um IF no css. O código basicamente diz o seguinte “menu-toggle ativo ache o irmão nav e aplique  left 0 “. Assim é possível selecionar um elemento HTML que esteja no mesmo nível que o input.

/* Active state */
#menu-toggle:checked ~ nav {
  left: 0;
}

/* Initial state */
nav {
  position: absolute;
  max-width: 300px;
  height: 100%;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  top: 50px;
  left: -100%;
  transition: 0.3s all linear;
}

No código você consegue ver o estado inicial de nav e o estado ativo.

Espero que você tenha gostado, em breve farei mais variações desse menu. Até lá !