O menu não abre. | CSS: dispondo elementos com Flexbox e Grid

7
respostas

por ALEXANDRA ZUCOLOTTO

| 18.2k xp | 5 posts

Revisei os códigos e não encontro o erro. Index.js está salvo dentro da pasta flex-e-grid-main como /* index.js.

.menu-lateral{
display: flex;
flex-direction: column;
background-color: #15191C;
width: 75vw;
height: 100vh;

position: absolute;
left: -100vw;
transition: .25s;
Z-index: 99;

}

.menu-lateral--ativo{ left: 0; transition: .25s; }

const botaoMenu = document.querySelector ('.cabecalho__menu') const menuLateral = document.querySelector ('.menu-lateral')

botaoMenu.addEventListener ('click', () => { menuLateral.classlist.toggle('menu-lateral--ativo') })

7 respostas

por Lorena Garcia

| 8324.6k xp | 12181 posts

Alura Scuba Team Suporte Educacional

17/11/2022

Oi Alexandra, tudo bem?

Tem um errinho de digitação no seu código, no menuLateral.classList, você escreveu com o L minúsculo. Lembrando que o JavaScript é case-sensitive, é uma linguagem que diferencia maiúsculas de minúsculas. Isso significa que as palavras-chave, variáveis, nomes de função e quaisquer outros identificadores do idioma devem sempre ser digitados com letras maiúsculas consistentes.

Faça essa correção no seu código que ele deve funcionar.

const botaoMenu = document.querySelector ('.cabecalho__menu') 
const menuLateral = document.querySelector ('.menu-lateral')

botaoMenu.addEventListener ('click', () => { 
    menuLateral.classList.toggle('menu-lateral--ativo') 
})

Um abraço e bons estudos.

por ALEXANDRA ZUCOLOTTO

| 18.2k xp | 5 posts

17/11/2022

Oi, Lorena.

Obrigada pela resposta, mas não resolveu :( . Será que o arquivo não está salvo em uma pasta errada, ou ... não sei dizer. Será que poderias dar uma olhadinha novamente?

Muito obrigada ;). AZ

por Lorena Garcia

| 8324.6k xp | 12181 posts

Alura Scuba Team Suporte Educacional

18/11/2022

Oi Alexandra :D

A estrutura do seu projeto tem que estar mais ou menos assim:

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

A pasta:

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

Dentro do assets:

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

Agora, você poderia mandar o seu HTML completo? Porque ele não carregou aqui e não consegui ver. Você pode mandar ele usando a opção de inserir bloco de código </>, que aí podemos visualizar melhor e conseguir copiar para fazer testes.

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

E você também pode baixar o código da aula para comparar com a sua estrutura, aqui nessa aula.

E ver se está certinho.

Um abraço e bons estudos.

por ALEXANDRA ZUCOLOTTO

| 18.2k xp | 5 posts

18/11/2022

<DOCTYPE html>
<<!DOCTYPE html>
<html lang "pt.br">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZC | Home </title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/estilos.css">
</head>
<body>
    <header class="cabecalho">
        <button class="cabecalho__menu" aria-lable= "Menu"><i></i></button>
        <img src="assets/img/logo.svg" alt="Logotipo da HZC" class="cabecalho__logo">
        <button class="cabecalho__notificacao" aria-lable= "Notificação"><i></i></button>
    </header>
    <nav class="menu-lateral">
        <img src="assets/img/logo.svg" alt="Logotipo da HZC"class= "menu-lateral__logo">
        <a href="#" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Início</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
    </nav>
    <script src="index.js"></script>




</body>
</html>

por ALEXANDRA ZUCOLOTTO

| 18.2k xp | 5 posts

18/11/2022

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

por Lorena Garcia

| 8324.6k xp | 12181 posts

Alura Scuba Team Suporte Educacional

18/11/2022

Que estranho, copiei todos os códigos e funcionou aqui. O menu abriu:

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

Vamos fazer o seguinte. Fecha tudo e reinicia. E então copia e compara esses códigos:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HZC | Home</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/estilos.css">
</head>
<body>
    <header class="cabecalho">
        <button class="cabecalho__menu" aria-label="Menu"><i></i></button>
        <img src="assets/img/logo.svg" alt="Logotipo da HZC" class="cabecalho__logo">
        <button class="cabecalho__notificacao" aria-label="Notificação"><i></i></button>
    </header>
    <nav class="menu-lateral">
        <img src="assets/img/logo.svg" alt="Logotipo da HZC" class="menu-lateral__logo">
        <a href="#" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Início</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
        <a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
    </nav>
    <script src="index.js"></script>
</body>
</html>

.menu-lateral {
    display: flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;

    position: absolute;
    left: -100vw;
    transition: .25s;
}

.menu-lateral--ativo {
    left: 0;
    transition: .25s;
}

.menu-lateral__logo {
    width: 118px;
    align-self: center;
    padding: 16px;
}

.menu-lateral__link {
    height: 64px;
    color: #95999C;
    padding-left: 64px;
    display: flex;
    align-items: center;
}

.menu-lateral__link--ativo {
    color: #FFFFFF;
    padding-left: 56px;
    border-left: 8px solid #FFFFFF;
}

JavaScript:

const botaoMenu = document.querySelector('.cabecalho__menu')
const menu = document.querySelector('.menu-lateral')

botaoMenu.addEventListener('click', () => {
    menu.classList.toggle('menu-lateral--ativo')
})

Lembra de salvar tudo. E testar. Esse código funcionou certinho aqui.

por ALEXANDRA ZUCOLOTTO

| 18.2k xp | 5 posts

22/11/2022

Oi, Lorena.

Ontem testei o que sugeriste, mas seguiu sem funcionar. Desconfio que tenha algum problema no Java (sei que, nos computadores do trabalho, não pode ser atualizado pelo usuário). Outros erros começaram a acontecer ontem (segui fazendo o curso), mas, ao revisar, não encontrei o problema. Vou dar prosseguimento e ver se descubro.

Obrigada, por enquanto. ;)

Alexandra Z.