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 :
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>