fechar menu responsivo | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Marcos Vinícius de Oliveira Silva

| 238.7k xp | 139 posts

boa tarde! estou tentando por em prática o que venho aprendendo em JS, para isso comecei a fazer uma página html e no menu me surgiu uma dúvida que é como fechar o menu responsivo depois que clicar fora do menu ou mesmo se eu clicar novamente no ícone (hamburguer), segue meu código:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta lang="Pt-br">
        <meta name="viewport" content="width=device-width, initial scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Meu Primeiro</title>
    </head>
    <body>
        <header>
            Meusite.com
        </header>
        <nav>
            <ul id="menu" class="lista-menu fecha-menu">
                <li class="item-menu">
                    <a href="#">home</a>
                </li>
                <li class="item-menu">
                    <a href="#">curso</a>
                </li>
                <li class="item-menu">
                    <a href="#">contato</a>
                </li>
                <li class="item-menu">
                    <a href="#">sobre</a>
                </li>

            </ul>
            <div class="hamburguer">
                <button><img src="menu.svg"></button>
            </div>
        </nav>
        <h1>Meu Primeiro programa!</h1><br>
        Seria isso um programa?

        <script src="menu.js">

        </script>
    </body>
</html>

style.css

body{
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 1em;
    border: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
header{
    height: 4em;

    text-transform: uppercase;
    display: flex;
    margin: 0%;
    align-items: center;
    padding-left: 30px;
    font-size: 30px;
    background-color: paleturquoise;
}
nav{
    background-image: linear-gradient(#000000, #cccccc);
    width: 100%;
    margin: 0%;

}

.lista-menu{
    list-style: none;
    display: block;
    width: 100%;
    padding: 0%;
    margin: 0%;
}

.item-menu{
    display: inline-block;
    margin: 0px;
}

.item-menu a{
    text-decoration: none;
    color: white;
    padding: 20px;
    display: block;
}
.hamburguer{
    display: none;
    align-content: center;
}
.item-menu:hover{

    background-color: #000000;
}

@media(max-width: 700px){

    .fecha-menu{
        display: none;
    }
    .hamburguer{
        display: block;
        text-align: center;
    }
    .hamburguer button{
        background-color: transparent;
        border: 0px;

    }
    .aparece-menu{
        display: block;
        text-align: center;
    }

}

menu.js

let btn = document.querySelector(".hamburguer");

btn.addEventListener("click", function(){
    let item = document.querySelector("#menu");
    item.classList.remove("fecha-menu");
    pegaLi = document.querySelectorAll(".item-menu");

    console.log(pegaLi);
    for(var i = 0; i < pegaLi.length; i++){
        pegaLi[i].classList.add("aparece-menu");
    }
});

3 respostas

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

13/07/2020

Fala ai Marcos, tudo bem? Isso pode ser feito de N maneiras, vou te dizer uma delas.

O mesmo listener que abre o menu verifique se o mesmo já está aberto, se sim, você remove a classe que mostra, senão, você adiciona.
Adicione um listener de click na div que faz o fundo do menu, quando clicar nela, você remove a classe que mostra o mesmo.

Espero ter ajudado.

solução!

por Marcos Vinícius de Oliveira Silva

| 238.7k xp | 139 posts

14/07/2020

obrigado pela ajuda Matheus.

funcionou assim pra mim: menu.js

let btn = document.querySelector(".hamburguer");
let btnMenu = document.getElementById("btn-hamburguer");
btn.addEventListener("click", function(){

    let item = document.querySelector("#menu");

    if(document.querySelector(".fecha-menu")){

        btnMenu.src = "fechar.svg";

        item.classList.remove("fecha-menu")
        pegaLi = document.querySelectorAll(".item-menu");

        for(var i = 0; i < pegaLi.length; i++){
            pegaLi[i].classList.add("aparece-menu");
        }
    }else{
        btnMenu.src = "menu.svg";
        item.classList.add("fecha-menu");

    }
});

style.css

body{
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: 1em;
    border: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f6f6f6;
}
header{
    height: 4em;

    text-transform: uppercase;
    display: flex;
    margin: 0%;
    align-items: center;
    padding-left: 30px;
    font-size: 30px;
    background-color: paleturquoise;
}
nav{
    background-image: linear-gradient(#000000, #cccccc);
    width: 100%;
    margin: 0%;

}

.lista-menu{
    list-style: none;
    display: block;
    width: 100%;
    padding: 0%;
    margin: 0%;
}

.item-menu{
    display: inline-block;
    margin: 0px;
}

.item-menu a{
    text-decoration: none;
    color: white;
    padding: 20px;
    display: block;
}
.hamburguer{
    display: none;
    align-content: center;
}
.item-menu:hover{

    background-color: #000000;
}

@media(max-width: 700px){

    .fecha-menu{
        display: none;
    }
    .hamburguer{
        display: block;
        text-align: center;
    }
    .hamburguer button{
        background-color: transparent;
        border: 0px;

    }
    .hamburguer button img{
        width: 100%;
    }
    .aparece-menu{
        display: block;
        text-align: center;
    }

}

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

14/07/2020

Boa Marcos, fico feliz que tenha dado certo.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.