Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como colocar o "Checkbox" dentro da <li> CATEGORIA

Percebi que a instrutora usou no CSS o seletor .opcoes__botao:checked~ .lista-menu.

porem isso não 'linkou' o checkbox a categoria.

Assim ao aplicar o display: none, a guia sumiu.

Gostaria de primeiro entender o que faz esse " ~ " e uma possivel solução do meu problema.

CSS

@media screen and (min-width: 1024px){
    .opcoes__botao:checked~ .lista-menu{
        display: block;
        width: auto;
    }

    .opcoes__botao{
        display: none;
    }
}

HTML

<ul class="opcoes">
            <input type="checkbox" id="opcoes__menu" class="opcoes__botao">
            <label for="opcoes__menu"></label>
            <ul class="lista-menu">
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front-end</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Design & UX</a>
                </li>
            </ul>
            <li class="opcoes__item">Categorias</li>
            <li class="opcoes__item"><a href="#" class="opcoes__link"></a>Favoritos</li>
            <li class="opcoes__item"><a href="#" class="opcoes__link"></a>Minha estande</li>
        </ul>

        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos"class="container__imagem container__imagem-transparente"></a>
            <a href="#"><img src="img/Compras.svg" alt="Meu carrinho de compras"class="container__imagem"></a>
            <a href="#"><img src="img/Usuario.svg" alt="Meu Perfil"class="container__imagem"></a>
        </div>

Obrigado.

1 resposta
solução!

Resolvido!

Não tinha me atentado que a lista <li class="opcoes__item">Categorias</li> estava fora da Label.

Aprendizado: ter atenção ao HTML.

At.te,