I am trying to add a function onclick for my dropdown menu, so instead of showing when I hover, I want it to show when I click on it, do you know what can I do?
My dropdown is on the grid icon next to "Images"
This is my repo so you can view my code: https://github.com/Diefonro/HTML-CSS
You can also see the page displayed right now at: https://diefonro.github.io/HTML-CSS
Thank you
you have to implement the below function and call it on the onclick event. and as @Tom suggested you need to get rid of the below part also from the style sheet
.dd-cont:hover .drop-d {
display: block;
}
this is how we catch specific element which has particular class and we can change styles of the elements like below
function clickDD() {
const dropdown = document.querySelector('.drop-d');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
here is a working example(jsFiddle) from your code
ps I did not included any assets to the fiddle
To handle the click event, you can take a look at EventListener or onclick attribute.
The dropdown is shown on hover because of this CSS rule :
.dd-cont:hover .drop-d {
display: block;
}