Menu responsivo simples – SEM JAVASCRIPT

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