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

[Dúvida] Menu Hambúrguer não ativa

Olá, estou com um problema no menu Hambúrguer , vi a aula refiz o código e não consigo ativar, segue o código para inspeção pois não acho de jeito nenhum esse erro.

        <ul class="opcoes">
            <input type="checkbox" name="opcoes-menu" class="opcoes__botao">
            <label for="opcoes__menu">
                <li class="opcoes__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>

esse é .CSS

.cabecalho__menu-hamburger {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
    height: 72px;

}

.container__imagem {
    padding: 1em;

}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__botao:checked~.lista-menu {
    display: block;

}

.lista-menu__titulo,
.lista-menu__item {
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo {
    color: var(--laranja);
    font-weight: 700;

}

.lista-menu__link {
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.container__botao {
    display: none;
}

.container__titulo{
    display: none;
}

.opcoes {
    display: none;
}

@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;
    }

    .opcoes {
        display: flex;
    }

    .opcoes__item {
        padding: 0 1em;
    }

    .opcoes__link {
        text-decoration: none;
        color: var(--preto);
    }
    .container__imagem-transparente {
        display: none;
    }

    .cabecalho__menu-hamburger{
        display: none;
    }

    .opcoes__botao:checked~.lista-menu {
        display: block;
        width: auto;
    }

    .opcoes__botao{
        display: none;
    }


}
5 respostas

Oi, Tarlei, tudo bem?

Para que eu possa simular o seu problema e te ajudar de forma mais assertiva, peço que você compartilhe o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto.

Fico no aguardo!

Obrigado por responder, segue o link:

https://responsividade-nine.vercel.app/

solução!

Oi, Tarlei, como vai?

Com relação ao menu hambúrguer, que aparece nos dispositivos mobile (smartphones), ele funciona adequadamente, como mostrado no gif abaixo:

Gif da tela do site alura book mostrando o funcionamento do menu hambúrguer

Com relação ao submenu criado em dispositivos com telas de no mínimo 1024px, percebi um erro no conteúdo do seu HTML, que impede que ao clicar em Categoria o submenu apareça.

A "label" que faz parte do checkbox apresenta um atributo for que faz referência a uma "id" opcoes__menu, inexistente na tag "input", como podemos observar no código abaixo:

 <input type="checkbox" name="opcoes-menu" class="opcoes__botao">
            <label for="opcoes__menu">
                <li class="opcoes__item">Categorias</li>
            </label>

Perceba que por não possuir uma ligação entre as tags "input" e "label" com o uso do par: id (no "input") e for" (na "label") o código não identifica o clique e não consegue abrir o submenu quando clicado em "Categoria".

Podemos resolver esse problema adicionando uma idcom mesmo nome do for. Com isso temos o seguinte código:

 <input type="checkbox" name="opcoes-menu" id="opcoes__menu" class="opcoes__botao">
            <label for="opcoes__menu">
                <li class="opcoes__item">Categorias</li>
            </label>

Com essas alterações o resultado nessa parte do código fica assim:

Gif da tela do site alura book mostrando o funcionamento do menu Categoria

Espero ter ajudado e caso tenha dúvidas, estarei à disposição para te ajudar. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Sim, foi útil e me ajudaram no Discord da Alura também, e devo acrescentar que foram muito rápidos em prestar a assistência e seu post que resolveu este problema, Muito Obrigado

Achei minha resposta, obrigado!!