CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: CSS only drop-down navigation menu  (Read 311 times)

AndrewTraub

  • Junior Member
  • *
  • Posts: 19
  • Karma: +0/-0
CSS only drop-down navigation menu
« 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/

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 741
  • Karma: +132/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: CSS only drop-down navigation menu
« Reply #1 on: 3 Jul 2021, 10:14:37 am »
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.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

mmerlinn

  • Jr. Member
  • **
  • Posts: 68
  • Karma: +8/-0
  • Nutcake
Re: CSS only drop-down navigation menu
« Reply #2 on: 3 Jul 2021, 12:21:39 pm »
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.
The soul purr pus of a spell cheque cur is two valley date hour ignore ants.

AndrewTraub

  • Junior Member
  • *
  • Posts: 19
  • Karma: +0/-0
Re: CSS only drop-down navigation menu
« Reply #3 on: 5 Jul 2021, 05:01:29 pm »
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.

AndrewTraub

  • Junior Member
  • *
  • Posts: 19
  • Karma: +0/-0
Re: CSS only drop-down navigation menu
« Reply #4 on: 7 Jul 2021, 11:01:26 am »
..
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?

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 741
  • Karma: +132/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: CSS only drop-down navigation menu
« Reply #5 on: 13 Jul 2021, 01:57:30 am »
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/
« Last Edit: 13 Jul 2021, 01:59:06 am by Jason Knight »
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

 

SMF spam blocked by CleanTalk

Advertisement