@RoksolanaVeres
Posted
Hey, great job! The responsiveness of your project is just awesome!
Regarding your issue with dark overlay, there is nothing too complicated.
First in your html you create an empty div with class "overlay" for example:
<body>
<div class="overlay"></div>
<h1 class="visually-hidden">News Homepage Challenge</h1>
...
</body>
Then you need to style it so that it stretches on the whole page and is hidden initially (until we open the menu):
.overlay {
position: absolute;
background-color: rgba(23, 24, 44, 0.6);
height: 100%;
width: 100%;
display: none;
}
You also need to create another class in css, for example, "active" which will override display: none;with display: block; to show the overlay when the menu is open:
.active {
display: block;
}
Now in your JS you select the overlay and add the "active" class to it when the menu is open and remove this class when the menu is closed:
let overlay = document.querySelector(".overlay");
menuBtnOpen.addEventListener("click", () => {
menuBtnOpen.setAttribute("aria-expanded", "true");
menuBtnClose.setAttribute("aria-expanded", "true");
overlay.classList.add("active");
});
menuBtnClose.addEventListener("click", () => {
menuBtnOpen.setAttribute("aria-expanded", "false");
menuBtnClose.setAttribute("aria-expanded", "false");
overlay.classList.remove("active");
});
That's all. You can also add an event listener to the overlay and make the menu close when the overlay is clicked (typical behavior in most websites)
overlay.addEventListener("click", () => {
menuBtnOpen.setAttribute("aria-expanded", "false");
menuBtnClose.setAttribute("aria-expanded", "false");
overlay.classList.remove("active");
});
Marked as helpful
@Islandstone89
Posted
@RoksolanaVeres Thanks, that worked! Appreciate it :)
@RoksolanaVeres
Posted
@Islandstone89 I'm glad it helped :)
Marked as helpful
