joan.f_
KPCKevin Powell - Community
•Created by joan.f_ on 4/13/2025 in #help
center element based on the container size, still not possible ?
4 replies
KPCKevin Powell - Community
•Created by joan.f_ on 4/2/2025 in #help
Bringing back the drop-down issue in 2025 .
Hi everyone
I’m here to talk about dropdowns.
First what is a drop-down :
Is <details> a drop-down ?
Is <select> a drop-down ?
Is <popover> opening the popover at the bottom of the opening button a drop-down ?
I would say yes. There is also the known drop-down issue on hover that by convention state that you shouldn’t make multiple levels in a hover drop-down because of the mobile version.
We can also think about this button where you can click on the left side to get the link or click on the arrow in the right side that would show you the sub level of the drop-down (bootstrap style)
Let’s now give some context .
Your à Wordpress developer , your in this discord so you love CSS and even tho progressive enhancement is the future if you sell your product as a
Multi platform, accessible , responsive solution then your component should be efficient for all latest version of the most common browser desktop and mobile.
Lastly JS is great but if you want you site to be ok with webvitals and enjoyable to visite , then JS should be used the less possible on each components to have overall a fast website.
Now
You have a nav on the header . There is a level one term(category) , let’s call it “elements”Inside this category there is 4 sub categories :
“Water”, “fire”, “earth”, “wind”.
The user needs to be able to go to the page “elements” and also to one of the sub categories . And I don’t Want to see this “see all elements” inside the drop-down.
In our case the hover drop-down on a “elements” link could work , but it doesn’t seems intuitive that this link is clickable. and what should we do about mobile agent that can’t hover.
UX is the main purpose here, no concession can be made on that point .
It would be a little caviar on the top if the components could be animated.
I’m sure everyone went through this , I’m just wondering what was the best solutions you found on that subject .
Happy coding
3 replies