Today we'll be making something slightly different. A full CSS powered dropdown menu!
No JavaScript required!
We will make use of a button, wit...
For further actions, you may consider blocking this person and/or reporting abuse
Given that this is a CSS-only solution, I was really anticipating accessibility to be totally non-existent. Truly grateful, Chris, to see that is NOT the case and you've thoughtfully included ARIA attributes in your example. 👏🏻👏🏻👏🏻👏🏻
Thank you, Angelique, I try to do so, but it's hard.
Not 100% sure on how it would work when you tab, so it opens and how you would get it away again.
It doesn't seem to work on ios chrome?
You are right Sam!
For ios we would need to add something like this to the button:
But then we are using JS again, and it won't re-close the menu with this.
well that's a bummer--there's no shim or any other option?
Hey Sam, unfurtionally not that I know off, someone else might know, I'll do some more research on how to fix this for iOS stable.
On mobile clicking on the avatar again does not close the drop-down.
Because it's open on avatar focus, so if you tap outside it must be closed
Yeah with focus that doesn't work, you have to click anywhere BUT the avatar to close it.
Nice tip!
Thank you Raul! ✌️
Amazing post for beginners and everyone. Usually, when doing this i made mistakes but all is clear now. Amazing💥💥💥
Oh very nice to hear Rahul, glad it's clear