@AdrianoEscarabote
Posted
Hi Lea, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
To make the close button on the burguer menu appear, we can do this:
First take the element you want to manipulate and store it in a variable, then we will add a conditional structure, which will check if the menu has a classList, and if it returns true the element will have its src attribute changed:
function toggleMenu ()
toggle.addEventListener('click', () => {
menu.classList.toggle('open-nav');
if (menu.classList.contains('open-nav')) {
imgMenu.setAttribute("src", "images/some-name.svg")
} else {
imgMenu.setAttribute("src", "images/name.svg")
}
});
}
The rest is great!
I hope it helps... 👍
Marked as helpful
@Hatchino
Posted
Hi @AdrianoEscarabote, Thanks but the program doesn't work. When i click the menu no longer closes.
@AdrianoEscarabote
Posted
@Hatchino i add:
<img src="images/icon-close-menu.svg" class="open" alt="icon-menu-open" id="imgMenu">
const imgMenu = document.getElementById("imgMenu")
function toggleMenu() {
const menu = document.querySelector('.menu');
const toggle = document.querySelector('.toggle-menu');
toggle.addEventListener('click', () => {
menu.classList.toggle('open-nav');
if (menu.classList.contains('open-nav')) {
imgMenu.setAttribute("src", "images/icon-close-menu.svg")
} else {
imgMenu.setAttribute("src", "images/icon-menu.svg")
}
});
}
toggleMenu()
test and let me know!
Marked as helpful
@Hatchino
Posted
Thanks @AdrianoEscarabote it works ! Do you know why my responsive menu appears directly without having clicked on the toggle.
@AdrianoEscarabote
Posted
@Hatchino this your media query:
@media (max-width: 840px)
.open-nav {
width: 50%;
opacity: 1;
}
is being activated, and this is giving the size of 50%, so it starts showing up on the screen. You can put this media query, in a class, and keep removing and placing it with the same function as toggleMenu
