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: .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á !