DEV Community

loading...

Discussion on: Create Drop-Down Menus with Plain CSS

Collapse
ronca85 profile image
ronca85

this is pretty cool, mohammad. i found out just the other day that there is a native element which has a built in dropdown function and, because it's native it has accessibility worked out.
developer.mozilla.org/en-US/docs/W...
why is this element not used more? my reasoning is that the html5 spec wasn't implemented properly because devs are lazy and don't care but even if they did care internet explorer most likely doesn't support a lot of stuff from the spec and if you have to support this browser there was no reason to implement the new elements.

Collapse
themohammadsa profile image
Mohammad S Author

Wow! I didn't know about this until now. Thanks a ton, for sharing.

Collapse
nikolab profile image
Nikola Betica

Details tag is not a correct semantic tag to use for navigation. You should always use nav tag. Also, in case of multi-level navigation details would not work correctly.

Collapse
ronca85 profile image
ronca85

i never claimed details should be used AS navigation. but if this element is used IN navigation it works great. it works great when nested, as well. tab around and it's fully accessible. if ie11 is not an issue i see no reason not to adopt this functionality. github uses the details tag where they need a dropdown, for example when switching branches. isn't this a good enough proof that it works?

Thread Thread
nikolab profile image
Nikola Betica • Edited

It's a proof it works - sometimes. "Dropdown effect" is not the core behaviour of the details tag, it's a browser behaviour. Meaning - you don't have a control of how the browser will display that dropdown. Also, let's say you have a dropdown but you want the text that opens a dropdown also to be a link. a tag will not work in summary tag, neither will it expand the content.

So, can you use it? Yes. Should you use it? No. Simply, there are better ways to do it.