CutCodeDown
Art and Design => Accessible Design => Topic started by: AndrewTraub on 2 Jul 2021, 06:02:57 pm
-
Is it possible to create a css-only drop-down navigation menu? All examples I've found use javascript to some extent. For example, this one: https://moderncss.dev/css-only-accessible-dropdown-navigation-menu/
-
Uhm... that doesn't use JavaScript... so what exactly are you on about?
It does use the idiocy that is some form of SCSS preprocessor, but no JS is present.
Also that's an interesting approach, using a button's :focus state for the touch open. I usually abuse a hidden checkbox for that. My only issue with it is that it's garbage on screen readers...
But then I gave up on dropdown menus a decade ago. Modals all the way now.
-
Personally, I HATE dropdowns, especially those that have HUNDREDS and HUNDREDS and HUNDREDS of choices (car-part.com, for example).
Dropdowns are SLOW. They are prone to INCORRECT selection. They require a MOUSE or non-intuitive knowledge to use.
-
My understanding as that the author himself says the code is not fully accessible without javascript and has a link to the javascript version on the page as well. I'll think about the modal option as that is interesting.
-
..
But then I gave up on dropdown menus a decade ago. Modals all the way now.
Do you have a sample using modals? I take it you pop them up just below the link item instead of in the center of the screen?
-
I take it you pop them up just below the link item instead of in the center of the screen?
Nope, full-screen. At least, if there's enough of them to not put them on the normal menu in the first place. That's really a problem though, people get so obsessed with crapping as many links as possible into their menus, and in the process just confuse the end user.
Which is why so many people give up on a lot of websites "normal navigation" and just google it with the site name in the title. I know on pages where people crap in these giant "mega-menus" that's exactly what I do as a user.
Like a client I had not so long ago where they had 200+ pages about different "products" that were all the same product in different colours and sizes, that they had then linked to in a giant-assed dropdown menu.
I reduced it to a single page with two selects. JS trapped the colour one to swap out the images as appropriate.
As to modal examples, see my medium article on the topic:
https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780
and its associated demo:
https://cutcodedown.com/for_others/medium_articles/modalSite/