Recentemente estava fazendo algumas pequenas modificações no meu site , quando reencontrei o cardápio de hambúrgueres que fiz para ele. Não é muito especial, apenas um menu que, assim que você entrar em uma resolução pequena, se comprimirá em um menu vertical oculto que você pode mostrar ou ocultar pressionando um botão. A parte interessante disso é que ele é feito apenas usando HTML e CSS.

Lembro-me que quando o estava a fazer não encontrava na internet um exemplo completo de como o fazer, e que implicava muita tentativa e erro para chegar ao resultado pretendido. Então, extraí o código do menu e transformei em um exemplo simplificado.

Os requisitos

Quando iniciei este projeto, tinha alguns requisitos que ele deveria cumprir:

• Só poderia usar HTML e CSS, incluindo interações (obviamente) .
• Tem que ser o mesmo menu, não tendo dois menus diferentes e apresentando apenas um.
• Caso o CSS não seja carregado, ele deve estar pelo menos funcional.

O projeto tem as seguintes etapas:

1. Faça uma lista de links.
2. Faça com que a lista de links tenha uma boa aparência em telas grandes.
3. Faça com que a lista de links tenha uma boa aparência em telas pequenas.
4. Torne a lista de links na tela pequena recolhível.

Um menu é, no final, uma lista de links usados ​​para navegação, então começamos com isso:

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

Tornar a lista bonita em telas grandes

Esta parte é direta, com um pouco de CSS estamos prontos. Cabe a você decidir o que fica legal:

nav {
    background-color: SeaGreen;
    color: snow;
    display: flex;
    justify-content: space-between;
}
nav ul {
    /* Make the markers disappear */
    list-style-type: none;
}
nav ul li {
    /* Puts the elements in a single line */
    display: inline-flex;
    margin: 0.3em 1em;
}

Tornar a lista bonita em telas pequenas

Usando consultas de mídia, restringimos as seguintes regras apenas a pequenas resoluções. Você pode brincar com o valor usado dependendo se, por exemplo, quiser considerar os tablets “pequenos dispositivos”.

@media (max-width: 576px) {
    nav {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }
    /* Because we are in mobile mode, we want to display it as a
       vertical list */
    nav ul {
        display: block;
    }
    /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
    nav ul:last-child {
        width: 100%;
        flex-basis: 100%;
    }
    nav ul li {
        margin-bottom: 0;
        width: 100%;
        text-align: right;
        padding: 0.5em;
    }
}

      
                

                    
                    
                
            

Finalmente, a parte interessante. Toda a mágica está aqui: dada uma caixa de seleção, se não estiver marcada, a lista adjacente não é exibida.

input[type='checkbox']:not(:checked)+ul {
    display: none;
}

<nav>
    <!-- Always visible items in the nav bar -->
    <ul>
        <li>
            <a href="https://threkk.com">threkk.com</a>
        </li>
    </ul>
    <!-- The hamburger menu -->
    <label for='menu' tabindex="0">
        
    </label>
    <input id='menu' type='checkbox' />
    <!-- The collapsable menu -->
    <ul>
        <li><a href='https://mastodon.social/@threkk'>Mastodon</a></li>
        <li><a href='https://twitter.com/threkk'>Twitter</a></li>
        <li><a href='https://github.com/threkk'>Github</a></li>
    </ul>
</nav>

nav input[type='checkbox'], nav label {
    display: none;
}

/* Stlying the menu icon, the checkbox stays hidden */
nav label {
    text-align: right;
    display: block;
    padding: 0.5em;
    line-height: 1.6em;
    align-self: center;
}

      
                

                    
                    
                
            

Gostou deste post? Deixe-me saber no Mastodon ou no Twitter !