After creating a responsive side menu that automatically appears when resizing the browser window, I encountered an unexpected issue. The side menu seems to appear and disappear quickly without clicking on the designated button. This particular problem is causing some inconvenience for me while everything else functions perfectly.
I am seeking assistance to determine the root cause of this issue. Can anyone provide insight into what might be causing this behavior?
var btn = document.querySelector(".toggle-btn");
var nav = document.querySelector(".nav");
btn.addEventListener("click", function () {
btn.classList.toggle("nav-open");
nav.classList.toggle("nav-open");
});@media screen and (max-width: 1300px) {
html,
body {
margin: 0px;
padding: 0px;
}
.toggle-btn {
height: 30px;
width: 30px;
position: relative;
float: right;
top: 10px;
right: 20px;
cursor: pointer;
z-index: 1000;
}
.toggle-btn span {
height: 3px;
background-color: #2c3e50;
width: 100%;
position: absolute;
top: 20px;
left: 0;
transition: .4s;
}
.toggle-btn span:before {
content: '';
height: 3px;
background-color: #2c3e50;
width: 100%;
position: absolute;
top: -10px;
left: 0;
transition: .4s;
}
.toggle-btn span:after {
content: '';
height: 3px;
background-color: #2c3e50;
width: 100%;
position: absolute;
top: 10px;
left: 0;
transition: .4s;
}
.menu {
height: 1000px;
background-color: #eeebec;
width: 250px;
position: absolute;
right: 0px;
}
.menu a {
color: text-align: center;
display: block;
padding-top: 30px;
}
.nav {
margin-right: -250px;
transition-duration: 0.4s;
}
.nav-open {
margin-right: 0px;
transition-duration: 0.4s;
}
.toggle-btn.nav-open span {
background: rgba(0, 0, 0, 0);
}
.toggle-btn.nav-open span:before {
top: 0;
transform: rotate(45deg);
}
.toggle-btn.nav-open span:after {
top: 0;
transform: rotate(-45deg);
}
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8>;
<title>Toggle Button</title>
<link rel="stylesheet" href="btn.css">
</head>
<body>
<div class="toggle-btn">
<span></span>
</div>
<div class="menu nav">
Blah
Blah
Blah
</div>
<script src="btn.js"></script>
</body>
</html> transform: rotate(45deg);
}
.toggle-btn.nav-open span:after {
top: 0;
transform: rotate(-45deg);
}
}