Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Não consigo interagir com o checkbox

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Importando fontes

por Estudante
| 155.7k xp | 2 posts

Bom dia,

Após adicionar:

.container__botao {
   display: none;
}

não consigo mais interagir com o checkbox, consequentemente, não abrindo ou fechando a aba do menu. Alguém sabe como resolver esse problema?

4 respostas
por Luana Gabriel da Silva
| 33.1k xp | 7 posts
Engenheira de Software Jr

Oi! Você consegue compartilhar o seu código? Quem sabe assim eu consiga te ajudar melhor!

por Raul Ramos de Oliveira de Lima Bonfim
| 139.5k xp | 25 posts

boa tarde, display none significa que o checkbox não está mais na tela, ele não ocupa mais nenhum espaço uma dica legal para fazer esse tipo de menu

você vai copiar essa label e colocar em volta do seu menu hamburguer ou seja, "APENAS" o ícone do menu vai dentro do label

<label for="box-invisivel">       ícone/imagem menu hamburguer aqui dentro     </label>

você vai colocar um id no input checkbox com exatamente o mesmo nome do 'for' do label

<input id="box-invisivel" type="checkbox">

ai no CSS você pode deixar o input checkbox com display none que mesmo se clicar no menu hamburguer ele vai acionar/ativar o checkbox independente de onde ele estiver (no caso em lugar nenhum) e consequentemente vai abrir o menu funcionando normalmente

exemplo fictício completo:

HTML

<input id="box-invisivel" type="checkbox">
<label for="box-invisivel"><img src="icone-menu-hamburguer" alt="icone do menu"></label>

CSS # = id

#box-invisivel{
    display: none;
}

assim o checkbox some e não perde a função, ele continua sendo marcado e desmarcado

por Estudante
| 155.7k xp | 2 posts

O meu código é esse para o HTML:

</head>
<body>
    <header class="cabeçalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label class="menu">
                <span class="cabeçalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <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">Estrutura</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>
            <img src="img/Logo.svg" alt="Logo da AluraBooks">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>
        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" class="container__imagem" alt="Meus favoritos"></a>
            <a href="#"><img src="img/Compras.svg" class="container__imagem" alt="Carrinho de compras"></a>
            <a href="#"><img src="img/Usuario.svg" class="container__imagem" alt="Meu perfil"></a>
         </div>
    </header>

e esse para o CSS:

`.cabeçalho__menu-hamburguer { width: 24px; height: 24px; background-image: url("../img/Menu.svg"); display: inline-block; background-repeat: no-repeat; background-position: center; display: inline-block; }

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

.container { display: flex; align-items: center; }

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

é interessante dizer, que durante o curso, a instrutora fez dessa maneira para deixar o checkbox invisível e funcional, mas da maneira que o Raul deixou acima também funcionou.

.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; }`

é interessante dizer, que durante o curso, a instrutora fez dessa maneira para deixar o checkbox invisível e funcional, mas da maneira que o Raul deixou acima também funcionou.

solução!
por Luana Gabriel da Silva
| 33.1k xp | 7 posts
Engenheira de Software Jr

Obrigada por compartilhar! O que causou o erro está aqui:

<label class="menu">
    <span class="cabeçalho__menu-hamburguer container__imagem"></span>
 </label>

Você utilizou class ao invés de for e, dessa forma, não "conectou" o label ao checkbox. :D