Menus should be Pure CSS (i.e. not required JS)

[jezmck]

I was really surprised to see that the drop-down menus require JS, since it's entirely possible to use pure CSS.

[lukeholder]

bootstrap originally didn't have any javascript. It is a CSS only framework, allowing you to create the dropdowns however you like.

You would not be able to have the same control over having multiple dropdowns using css. Submit a pull with an example to show your implementation.

[necolas]

JS is the right tool for the job here.

[jezmck]

Not really, there is a delay and it's unusable without.

[necolas]

I don't see any delay.

Hover-to-activate dropdowns are a usability issue.

The real dropdown link should be a URL to a page with other ways of accessing the links in the menu. Without JS you don't get the same functionality but you can always access the same content. If you wanted the links to be accessible via screenreader than the hiding method should be changed (probably easiest to replace it with something like toggleClass('vishidden').

[jezmck]

I'm not suggesting hover-to-activate (as the sole method).
A click (i.e. :focus) can also open a sub-menu.

[jezmck]

The delay isn't always visible, but is there since the JS depends on the 'ready' event.

[jezmck]

(Sorry, keep clicking the wrong button)

[mdo]

:focus doesn't work on IE7 or IE8. We need JS here since we need that support and :hover is a terrible idea.

[jezmck]

We're all agreed that :hover is terrible, why do people keep mentioning it?

[pierrocknroll]

Sorry to update a very old issue, but jezmck, I think you can re-open this issue because :

• IE7 is not supported anymore
• For :focus to work in IE8, a <!DOCTYPE> must be declared.

So a pure CSS dropdown is entirely possible.

Thanks

[hnrch02]

The JavaScript plugin is required in order for dropdowns to properly function on mobile devices, react to keyboard input and to limit the amount of simultaneously open dropdowns to one. Removing it was and still is a bad idea.

[mdo]

We won't be changing the behavior of the dropdown.

[pierrocknroll]

Well, ok.
I understand that completely remove the javascript features is a bad idea. But I don't think to make it work for non-javascript users would be difficult, by starting for exemple with the :focus trick.
What's the problem ?

[pierrocknroll]

Well...

a.dropdown-toggle:focus
{
  pointer-events: none;
}
a.dropdown-toggle:focus + .dropdown-menu
{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.dropdown-menu
{
  opacity: 0;
  display: block;
  visibility: hidden;
  transition: visibility 0.5s;
}

Add this to make it work in pure CSS. You have to add tabindex in your links too.

Thanks to http://koen.kivits.com/articles/pure-css-menu/

You can add it in noscript tag or with a body class noJs (see http://stackoverflow.com/a/4665769)

[cvrebert]

@pierrocknroll Don't know if it's critical to the functioning of your code, but pointer-events requires IE 11.0+.

[pierrocknroll]

Yes but, between a menu NOT WORKING AT ALL without javascript and a menu WORKING for recent browsers, my choice is made.

Besides, it will work without it, pointer-events is used for closing the menu when you click on a open menu.

Cheers

[mdo]

@pierrocknroll That entire example is bunk though—doesn't work at all on iOS. Sorry, but JS is actually the safest and best way to do this stuff across every browser and device.

[pierrocknroll]

It's not for replace JS. It's for non-js users. Your JS is good. If you have a better solution for them, feel free to provide it.

I don't want to argue with the % of non-js users. There is still companies where the fucking network admin disable js for whatever security reason and where an intranet site without a working menu is problematic.

And let me say that a solution that works for some browsers is better that no solution at all.