Issue
I'd like to ask another problem about HTML/CSS/Javascript. The menu hamburger button is working good, as well as pressing on the overlay layer to close itself. But the close button is not working, no matter if I change the addEventlistener
of that button from click
to touchstart
, since it's supposed to be only for mobile devices and tablets. I even tried to put an onclick
in svgCancel
in the HTML file, with a function of that onclick
in Javascript, but the console sends a warning that the function is not defined. I'd like to ask if there's any mistakes in my code now, or what should I write as well to achieve this action?
Thank you!
const menu = document.getElementById('menu');
const svgham = document.getElementById('svgham');
const svgCancel = document.getElementById('svgCancel');
const overlay = document.getElementById('overlay');
menu.addEventListener("click", () => {
overlay.style.display = "flex";
svgham.style.display = "none";
svgCancel.style.display = "flex";
});
svgCancel.addEventListener("click", () => {
overlay.style.display = "none";
svgCancel.style.display = "none";
svgham.style.display = "flex";
});
overlay.addEventListener("click", () => {
overlay.style.display = "none";
svgCancel.style.display = "none";
svgham.style.display = "flex";
});
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: right;
padding: 1rem;
background-color: rgba(46, 46, 46, 0.2);
}
nav a {
display: inline-block;
width: 7rem;
text-align: center;
text-decoration: none;
color: #000000;
}
main {
overflow: scroll;
}
#menu {
margin: 0;
border: 0;
text-align: right;
background-color: transparent;
}
#svgCancel {
display: none;
}
#overlay {
position: fixed;
display: none;
flex-direction: column;
align-items: center;
height: 100vh;
width: 100vw;
top: 3rem;
left: 0;
font-weight: 500;
padding: 4rem 1rem 0;
background-color: rgba(46, 46, 46, 0.1);
backdrop-filter: blur(6px);
}
#overlay a {
font-size: x-large;
margin: 2rem;
}
#overlay a:hover {
padding: 0.5rem 1rem;
border: solid 1px;
}
<nav>
<a id="menu">
<svg id="svgham" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z" fill="currentColor" /><path d="M2 12.0322C2 11.4799 2.44772 11.0322 3 11.0322H21C21.5523 11.0322 22 11.4799 22 12.0322C22 12.5845 21.5523 13.0322 21 13.0322H3C2.44772 13.0322 2 12.5845 2 12.0322Z" fill="currentColor" /><path d="M3 17.0645C2.44772 17.0645 2 17.5122 2 18.0645C2 18.6167 2.44772 19.0645 3 19.0645H21C21.5523 19.0645 22 18.6167 22 18.0645C22 17.5122 21.5523 17.0645 21 17.0645H3Z" fill="currentColor" /></svg>
<svg version="1.1" id="svgCancel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" style="enable-background:new 0 0 24 24;" xml:space="preserve"><line style="fill:none;stroke:#000000;stroke-width:2.5;stroke-miterlimit:10;" x1="0" y1="0" x2="18" y2="18"/><line style="fill:none;stroke:#000000;stroke-width:2.5;stroke-miterlimit:10;" x1="0" y1="18" x2="18" y2="0"/></svg>
</a>
</nav>
<main>
<div id="overlay">
<a>a</a>
<a>b</a>
<a>c</a>
<a>d</a>
</div>
</main>
Solution
The answer is quite simple actually... What you've done is nested both svg elements (the hamburger and the close) in a menu component...
The menu element is what you attach your onclick method to... So when your menu is clicked (i.e. either svg) it opens the menu back... So what happens when you click on the close svg is it closes and instantly opens the menu back up... So all you have to do is change the line that says
menu.addEventListener("click", () => {
to svgham.addEventListener("click", () => {
So your code would look like this ->
const menu = document.getElementById('menu');
const svgham = document.getElementById('svgham');
const svgCancel = document.getElementById('svgCancel');
const overlay = document.getElementById('overlay');
svgham.addEventListener("click", () => {
overlay.style.display = "flex";
svgham.style.display = "none";
svgCancel.style.display = "flex";
});
svgCancel.addEventListener("click", () => {
overlay.style.display = "none";
svgCancel.style.display = "none";
svgham.style.display = "flex";
});
overlay.addEventListener("click", () => {
overlay.style.display = "none";
svgCancel.style.display = "none";
svgham.style.display = "flex";
})
While you are here, since you have posted this question on SO (Stack Overflow), I'd like to mention that you should keep your code practices consistent... What I mean by this is the use of svgCancel vs the use of svgham (where this could have been called svgHam) if you were keeping the sam format (camelCase).
Hopefully my explanation of both click methods happening one after the other makes sense why you are experiencing what you are experiencing.
A child component's click method happens before the parent.
Answered By - Sharp Dev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.