Is it possible to have click based menu dropdown in bootstrap via CSS?
I am looking for a solution where we have default bootstrap based dropdown that open upon hovering, can we have it opened based on click via CSS and not JS?
10 Replies
via css? no
you can change the trigger mode
what you can do, in css, is using weird hacks
or force everything to look like a dropdown but is a
<details>
or use the checkbox trickYou can now use popovers which is purely html and css but details is the semantic element for drop downs
yes, that's true, but the support is just ~85.8%
https://caniuse.com/?search=popover
for something that critical, i wouldn't trust popovers
maybe next year
but thanks for pointing those out, i completely forgot about them
Damn I thought it had better support for some reason.
sadly, it doesn't
also, ios has a "bug" where the popovers don't close if you tap somewhere else
I have to rely on JS in that case it apears, hopefully modern CSS will bring some solution to this or bootstrap itself.
if you're using bootstrap, you can use the god-awful checkbox + focus hacks
where you force it to display on hover and when a certain hidden checkbox is checked
this is very very very very very very very very very very awful go use if you are visually impaired, but it works
Thanks bro for much needed help. I will figure something out either via the way u mentioned or JS(:fh_exits: ).
if you use bootstrap, it's done for you
Sorry for very late response brother, I cant thank you already enough but one of my team member applied JS to achieve it. +rep to you anyways as always. 🙌
Anyways I have a bigger issuer that I am facing I will make another thread for it as per the community guidelines. :)