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

[Projeto] O Menu não aparece

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Criando o Menu Hambúrguer

por Marcos Antonio Cruz da Costa
| 31.2k xp | 16 posts

Após eu inserir o "checked" no código o menu deixou de aparecer, tanto o texto que deveria aparecer abaixo como o texto de antes que aparecia abaixo

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-between; align-items: center; position: relative; }

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

.container__imagem { padding: 1em; }

.lista-menu { display: none; position: absolute; }

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

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

HTML -

        <ul class="lista-menu">

            <li class="lista-menu__titulo">Categorias</li>
            <li class="lista-menu__iten">
                <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__iten">
                <a href="#" class="lista-menu__link">Front-End</a>
                </li>
                <li class="lista-menu__iten">
                <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__iten">
                <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__iten">
                <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>

    <div class="container">
    <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos" class="container__imagem"></a>
    <a href="#"><img src="img/Compras.svg" alt="Carrinho de Compras" class="container__imagem"></a>
    <a href="#"><img src="img/Usuário.svg" alt="Meu Perfil" class="container__imagem"></a>
    </div>

</header>
8 respostas
por Marcos Antonio Cruz da Costa
| 31.2k xp | 16 posts

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-between;
    align-items: center;
    position: relative;
}

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

.container__imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
}

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

.lista-menu__titulo, .lista-menu__iten {
    padding: 1em;
    background-color: var(--branco);
}
por Lorena Garcia
| 8079k xp | 11743 posts
Alura Scuba Team Suporte Educacional

Oi Marcos, tudo bem?

Poderia mandar seu código HTML todo? Veio apenas uma parte e precisamos dele todo para copiar e fazer testes para tentar encontrar o erro.

Você pode colar aqui usando a opção de inserir bloco de código </>.

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

Um abraço e bons estudos.

por Cristopher Menezes Oliveira
| 13k xp | 5 posts

@Marcos

Tudo bem ?

Tenho algumas sugestões pra ti.

Faça o teste e veja se deu certo, depois você da um alô.

1º Acho bem bacana enviar o conteudo inteiro do HTML, desde o Docytipe até o final. Digo por experiencia própia rsrs

Mas vamos la, por conta da sua dúvida, acredito que esteja certo.

No seu index.html eu vi que colocou "propositalmente o nome "item "com a letra N no final, é isso mesmo né?

Tanto é que no CSS esta da mesma forma, ate ai ok.

Entretanto. pude perceber algumas coisas que citarei abaixo:

  • Header-CSS
.lista-menu__titulo, .lista-menu__iten {
    padding: 1em;
    background-color: var(--branco);

Eu acredito que possa ter alguma confusão, pois esta condição no header.css é:

Obs: Nas aulas também esta desta forma.

.lista-menu {
  display: none;
  position: absolute;
  top: 100%;

2º Ponto:

No seu "checked" tenta colocar um espaço entre o ~ entre as palavras , ficara assim: .container-botão:checked ~ .lista-menu { , as vezes pode acontecer isso

OBS: Coloque com o título que voce colocou, eu sempre coloco o que fica melhor para mim.

Após realizar todas as informações que sugeri, realizei o salvamento dentro do VS Code e depois abra seu navegador (index.html) para ver se deu certo, se por acaso ainda persistir, descobri algo também que parece simples mas pode dar certo.

De 2 cliques no ícone em formato de celular(conforme imagem abaixo), no formato desenvolvedor (dependendo do seu é o F12)

Talvez resolva:

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

Bons estudos e se precisar, me chama https://wa.me/5511949694303 (WhatsApp - Cris)

Abs

por Marcos Antonio Cruz da Costa
| 31.2k xp | 16 posts

INDEX - HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header class="cabeçalho">
        <div class="container">
            <input type="checkbox" id="menu" name="container__botao">
            <label for="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__iten">
                    <a href="#" class="lista-menu__link">Programação</a>
                    </li>
                    <li class="lista-menu__iten">
                    <a href="#" class="lista-menu__link">Front-End</a>
                    </li>
                    <li class="lista-menu__iten">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                    </li>
                    <li class="lista-menu__iten">
                    <a href="#" class="lista-menu__link">Business</a>
                    </li>
                    <li class="lista-menu__iten">
                    <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>

        <div class="container">
        <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos" class="container__imagem"></a>
        <a href="#"><img src="img/Compras.svg" alt="Carrinho de Compras" class="container__imagem"></a>
        <a href="#"><img src="img/Usuário.svg" alt="Meu Perfil" class="container__imagem"></a>
        </div>

    </header>
</body>

</html>
por Marcos Antonio Cruz da Costa
| 31.2k xp | 16 posts

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-between;
    align-items: center;
    position: relative;
}

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

.container__imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
}

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

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

.lista-menu__titulo {
    color:var(--laranja) ;
}
por Marcos Antonio Cruz da Costa
| 31.2k xp | 16 posts

Perdão por ter ido em falta de informações, ainda estou aprendendo a mexer no Fórum. E sobre o espaçamento do til, mesmo eu fazendo isso ele continua igual, mas não sei se pode ser culpa de outro erro meu ou do programa, ja que o editor de codigo que eu uso (O Sublime Text) ele deixa algumas coisas em branco mesmo estando certasInsira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!
por Lorena Garcia
| 8079k xp | 11743 posts
Alura Scuba Team Suporte Educacional

Oi Marcos, tudo bem?

Como o Cristopher comentou, no seu .lista__menu, está faltando adicionar duas propriedades, que é o top: 100% e awidth 60vw, para que o menu fique posicionado de forma correta. Assim:

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

Creio que fazendo esses ajustes vai dar certo.

Uma coisa que você sempre pode fazer é comparar o seu código com o da aula indo no repositório do GitHub que é disponibilizado a cada aula, assim você já está praticando também.

Um abraço e bons estudos.

por Bruno Gomes de Souza
| 70.2k xp | 2 posts

Bom dia Marcos, tudo bem?

Analisei o teu código e percebi um erro 

<input type="checkbox" id="menu" name="container__botao">

Código correto 

<input type="checkbox" id="menu" class="container__botao">

No teu input está (name="container__botao) e o correto é (class="container__botao).

Espero ter ajudado. Abraços.