O checkbox com o menu de tablet desativa com o comando Display: none; , e não consigo abrir a lista categorias
O checkbox com o menu de tablet desativa com o comando Display: none; , e não consigo abrir a lista categorias
Código:
<ul class="opcoes">
<input type="checkbox" id="opcoes-menu" class="opcoes__botao">
<label for="opcoes-menu"></label>
<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>
<li class="opcoes__item"><a href="#" class="opcoes__link">Favoritos</a></li>
<li class="opcoes__item"><a href="#" class="opcoes__link">Minha estante</a></li>
</ul>
CSS:
.opcoes {
display: flex;
}
.opcoes__item {
padding: 0 1em;
text-transform: uppercase;
}
.opcoes__link {
text-decoration: none;
color: var(--preto);
}
.container__imagem__transparente {
display: none;
}
.cabecalho_menu_hamburguer {
display: none;
}
.opcoes__botao:checked~.lista-menu {
display: block;
width: auto;
background-color: var(--branco);
}
.opcoes__botao {
display: block;
}
Olá, Fillipe! Tudo bem?
Agradeço por compartilhar o trecho do código HTML e CSS. Mas com base no código fornecido, não identifiquei nenhum erro aparente. No entanto, seria útil se você pudesse compartilhar o código completo do <header>
e também o código completo do arquivo header.css. Dessa forma, poderei fornecer uma assistência mais precisa e detalhada.
Estou aqui para ajudar no que for necessário, fico no aguardo e a disposição.
Um grande abraço e até mais!
Boa noite Fillipe, baseado no código acima consegui identificar
<ul class="opcoes">
<input type="checkbox" id="opcoes-menu" class="opcoes__botao">
<label for="opcoes-menu">
</label>
<li class="opcoes__item">Categorias</li>
</label>
O elemento "label" foi fechado antes de cobrir o item Categorias, oque provavelmente pode ter comprometido a identificação de que o item é pra ser o acionador do botão
Boa noite! Não tinha notado que tinha um outro </label> ao lado do <label for="opcoes-menu">. Obrigado pela ajuda!