Currently, I am working on implementing a hamburger menu functionality. The basic setup involves creating a menu that transforms into a cross icon when clicked, and this part is functioning correctly.
function drop(){
let bars = document.querySelector("div.bar");
let cross = document.querySelector("div.cross");
bars.style.display = "none";
cross.style.display = "flex";
}div.bar {
display: flex;
transition: 1s;
cursor: pointer;
justify-content: space-between;
flex-direction: column;
height: 30px;
color: gray;
}
.ibar {
display: inline-flex;
width: 40px;
height: 5px;
background-color: black;
border-radius: 31%;
}
.cross{
display: none;
justify-content: center;
align-items: center;
width: fit-content;
font-size: 70px;
color: gray;
}<div class="bar" id="bar" onclick="drop()">
<div class="ibar"></div>
<div class="ibar"></div>
<div class="ibar"></div>
</div>
<div class="cross" id="hiddenCross">×</div>However, I have encountered a significant issue:
The problem arises when I attempt to add an if statement within my function like so:
if (cross.style.display === "none"){
bars.style.display = "none";
cross.style.display = "flex";
}
In this scenario, the two lines of code inside the if block do not execute as intended to change the display properties.
Initially, I suspected it might be due to a limitation of the document.querySelector property causing this unexpected behavior. However, even after using IDs to trigger the same function, the issue persists.