11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour, j'aimerais mettre en place un module qui pourrais s'ouvrir et se fermer. Mon programme javascript permet déjà de l'ouvrir, malheureusement, je n'arrive pas à le fermer. Est-ce que quelqu'un pourrais m'aider à trouver une solution ? Merci d'avance pour votre aide.

Voici mon code Javascript, CSS et HTML :
const icone = document.querySelector(".bx");
const menu = document.querySelector("#menu-container")

icone.addEventListener("click", (e) => {
    if(menu.style.visibility = "hidden") {
        menu.style.visibility = "visible"
        console.log(e)
    } else {
        menu.style.visibility = "hidden"
        console.log(e)
    } 
})

* {
  margin: 0;
}

body {
  height: 3000px;
  background: url(planet2.jpg) no-repeat fixed center/cover;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

i {
  font-size: 4rem;
  color: white;
  position: fixed;
  z-index: 20;
}

#menu-container {
  visibility: hidden;
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 5;
}

#menu {
  position: fixed;
  background: white;
  width: 97%;
  height: 90vh;
  border-radius: 10px;
  margin-bottom: 3vh;
}

.classes {
  margin-top: 30px;
}

p {
  width: 95%;
  padding: 10px 1%;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 20px 1.6%;
}

p:hover {
  background: rgb(255, 161, 2);
  border-radius: 500px;
}

<!DOCTYPE html>
<html lang="en">
<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>Exercice n°1</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <script defer src="index.js"></script> 
</head>

<body>
    <i class='bx bx-menu'></i>

    <div id="menu-container">
        <div id="menu">
            <div class="classes">
                <p id="home">Home</p>
                <p id="about">About</p>
                <p id="services">Services</p>
                <p id="team">Team</p>
                <p id="contact">Contact</p>
            </div>
        </div>
    </div>
</body>
</html>
Salut, alors il s'agit d'un oubli je suppose, au lieu de l’opérateur d'affection :
if(menu.style.visibility = "hidden")

essaye plutôt avec l'opérateur d'égalité^^ :
if(menu.style.visibility == "hidden")


Sinon quand tu chargera la page, ton menu ne se cachera qu'au deuxième clic, puis après il fonctionnera normalement, pour contrer cela rajoute ceci en bas de ton script js par exemple (et au passage le "visibility : hidden" dans ton css ne servira plus à rien) :
menu.style.visibility = "hidden";

avec ça il fonctionnera normalement.
Meilleure solution