Menu Responsivo: Um Desafio Sem JavaScript

O JavaScript revolucionou a interação web, mas o CSS também evoluiu significativamente. Desafio recente: criar um menu responsivo sem JavaScript. Veja o resultado e como foi feito!

Visualize o resultado aqui.

O código é direto, destacando o uso crucial do checkbox para controlar o estado do menu. A hierarquia do HTML é essencial; o checkbox e o container do menu precisam estar 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="/contato">Contato</a></li>
      <li><a href="/fale-conosco">Fale Conosco</a></li>
      <li><a href="/nossas-lojas">Nossas Lojas</a></li>
      <li><a href="/sobre-a-empresa">Sobre a Empresa</a></li>
    </ul>
  </nav>
</menu>

No CSS, o uso do til (~) permite uma condição IF: “se menu-toggle está ativo, encontre o irmão nav e aplique left 0”. O posicionamento absoluto do nav é crucial, transicionando de -100% para 0 quando o checkbox é ativado.

/* Estado Ativo */
#menu-toggle:checked ~ nav {
  left: 0;
}

/* Estado Inicial */
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;
}

Espero que aprecie; em breve, mais variações desse menu! Até lá! 🚀

Outros links:

• Instagram: @devraphaelcorrea
• YouTube