Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Menu não aparece

quando clico em categorias o menu não aparece, já revisei o código mas não encontro nenhum erro nele visto que as mesmas propriedades funcionaram anteriormente

HTML:


        <ul class="opçoes">
            <input type="checkbox" id="opçoes__menu" class="opçoes__botao">
            <label for="opçoes__menu">
                <li class="opçoes__item">Categorias</li>
            </label>

            <li class="opçoes__item"><a href="#" class="opçoes__link">Favoritos</a></li>
            <li class="opçoes__item"><a href="#" class="opçoes__link">Minha estante</a></li>
        </ul>


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

CSS:

@media screen and (min-width: 1024px){
    .container__titulo, .container__titulo--negrito {
        font-family: var(--fonte-secundario);
        font-size: 30px;
    }

    .container__titulo {
        font-weight: 400;
        display: block;
    }

    .container__titulo--negrito {
        font-weight: 700;
    }

    .opçoes {
        display: flex;
    }

    .opçoes__item {
        padding: 0 1em;
        text-transform: uppercase;
    }

    .opçoes__link {
        text-decoration: none;
        color: var(--preto);
    }

    .container__imagem--tranparente {
        display: none;
    }

    .cabecalho__menuhamburger {
        display: none;
    }

    .opçoes__botao:checked~.lista-menu {
        display: block;
        width: auto;
    }

    .opçoes__botao {
        display: none;
    }
2 respostas
solução!

Fala, Igor! Tudo bom com você?

Tenta mudar o seu código HTML pra essa forma aqui:

<ul class="opçoes">
    <input type="checkbox" id="opçoes__menu" class="opçoes__botao">
    <label for="opçoes__menu">
        <li class="opçoes__item">Categorias</li>
    </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="opçoes__item"><a href="#" class="opçoes__link">Favoritos</a></li>
    <li class="opçoes__item"><a href="#" class="opçoes__link">Minha estante</a></li>
</ul>

Isso porque, nessa parte do seu código CSS em seguida, você está usando o '~' como combinador:

.opçoes__botao:checked~.lista-menu {
        display: block;
        width: auto;
    }

O '~' é um combinador que seleciona todos os elemento irmãos daquele especificado. Então, nesse caso, você está aplicando as propriedades passadas para todos os elementos que são da classe '.lista-menu' e são irmãos dos elementos que têm classe '.opçoes__botao', que foram marcados. A questão é que, o seu input '.opçoes__botao' estava encapsulada dentro do ul 'opçoes', enquanto que a lista ul '.lista-menu' está fora de fora, então não será pega pelo seletor. Então, se você fazer essa mudança no seu HTML, deve dar certo. Talvez exista uma forma de fazer isso apenas alterando o combinador no CSS, mas eu desconheço algum que faça isso.

Espero ter te ajudado, Igor, bons estudos pra você e um grande abraço, meu amigo!

Muito obrigado, ajudou bastante