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

[Dúvida] CATEGORIAS PARA TABLET NÃO ABRE

Referente ao curso HTML e CSS: responsividade com mobile-first

por ANA MARIA OLIVA DE QUEIROZ
| 62.8k xp | 83 posts
SUPORTE

A lista do menu CATEGORIAS para tablet não aparece. Encontrei um topico parecido aqui no forum mas a alteração que fiz conforme a resposta dada ao tópico não surtiu efeito.

Envio aqui apenas a parte já alterada do html

    • Categorias

    Abaixo é a que eu tinha feito

    • Categorias

    Segue todo o código header.css

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

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

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

    .container__imagem { padding: 1em; background-repeat: no-repeat; background-position: center; }

    .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: inline-block;
}

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

.opcoes {
    display: flex;
}

.opcoes__item {
    padding: 0 1em;
    text-transform: uppercase;
}

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

.container__imagem-transparente {
        display: none;
    }

.cabeçalho__menu-hamburguer {
    display: none;
}

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

.opcoes__botao {
    display: none;
}

    }

4 respostas
por Eduardo Augusto Martins Pozzi
| 88.8k xp | 43 posts

Bom dia Ana.

Poderia também colocar o index.hmtl aqui? Pelo css, pra mim, pareceu ok, talvez pode ser algo no html.

por ANA MARIA OLIVA DE QUEIROZ
| 62.8k xp | 83 posts
SUPORTE

Boa tarde Eduardo! Pensei em enviar o HTML mas como não sei até que ponto dele eu teria que enviar, então não o fiz. Prossegui com o curso mesmo sem o Categorias funcionando e por isso o código tem mais algumas informações. Envio o HTML até o fechamento do O header.css que enviei ficou uma parte em texto sem formatação e talvez um pouco confuso. Se precisar que eu envie de novo

  <!DOCTYPE html>

<header class="cabeçalho">
<div class="container">
 <input type="checkbox" id="menu"  class="container__botao">
 <label for="menu" class="container__rotulo">       
 <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">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 e UX<a></li>            
</ul>

 <img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem"></div>
 <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>

<ul class="opcoes">
    <input type="checkbox" id="opcoes-menu" class="opcoes__botao">
    <label for="opcoes__menu" class="opcoes__rotulo">
    <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 e 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>

<div class="container">
 <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos" class="container__imagem container__imagem-transparente"></a>
 <a href="#" class="container__link">
    <img src="img/Sacola.svg" alt="Minha Sacola" class="container__imagem">
    <p class="container__texto">Minha Sacola</p>
</a>
 <a href="#" class="container__link">
    <img src="img/Usuario.svg" alt="Meu perfil" class="container__imagem">
    <p class="container__texto">Meu Perfil</p>
</a>
</div>
     </header>
por Eduardo Augusto Martins Pozzi
| 88.8k xp | 43 posts

Olá Ana.

Seu CSS está correto, mas seu html está com alguns problemas que quando alterei aqui funcionou corretamente.

Na primeira div - container, você está fechando a div logo depois da imagem do logo e deveria fechar ela depois do titulo do container

Fica assim:

        <div class="container">
            <input type="checkbox" id="menu"  class="container__botao">
            <label for="menu" class="container__rotulo">
            <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">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 e UX</a></li>
            </ul>

            <img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
            <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
        </div>

E nas suas "lista-menu", as tag ancoras não estão fechadas corretamente. Deveriam ficar :

<a href="#" class="lista-menu__link">texto</a>

Isso ocorre nas duas listas, então tem que corrigir nesses dois lugares.

E por último, na lista opções, a tag label deve referenciar ao id do input e não à classe.

Vai ficar assim:

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

Repare que o seu código está for="opcoes__menu" mas deveria estar for="opcoes-menu"

Fazendo essas alterações aqui, passou a funcionar corretamente.

Uma outra dica, Se achar que vai ser muito código pra colocar aqui no forum, versione seu projeto no github desde o princípio, e aí coloca aqui o link para o seu projeto e as pessoas podem acessar o código por lá e ter uma visão completa do que você está desenvolvendo.

Bons estudos. Abraço

solução!
por ANA MARIA OLIVA DE QUEIROZ
| 62.8k xp | 83 posts
SUPORTE

Olá Eduardo,

De fato funcionou perfeitamente após os ajustes. A ação de copiar e colar facilita bem mas se houver algum erro que não foi corrigido replicamos ele no código. Vou me atentar de verificar com atenção antes de copiar uma lista principalmente.

Valeu a dica de versionar o código no Git hub para melhor acesso em caso de suporte.

Muito grata!

Insira aqui a descrição dessa imagem para ajudar na acessibilidade