twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.01k stars 78.77k forks source link

Why navbar items (dropdowns) cannot be open on hover? #16966

Closed PELock closed 9 years ago

PELock commented 9 years ago

I understand mobile first, but bootstrap is used in many products and not only for mobile applications and such a simple things as opening menu items on mouse over on desktop should be available by default (or with simple class switch) without using external scripts like:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

This is basic stuff and it's such a standard UX feature for web pages on desktop that by not including it you're confusing end users used to this behaviour on desktop.

cvrebert commented 9 years ago

Duplicate of #13533.

See http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/ for the rationale. AFAIK, nothing has changed @mdo's mind on this since that post.

opening menu items on mouse over on desktop should be available by default

Defining a useful notion of & detecting automatically an air-quotes "desktop" user-agent in a robust non-hacky way is difficult, particularly when you take phablets into account. (I'm sure @patrickhlauke could rant about that for hours :-) (And I would guess that accessibility considerations probably also favor clicking over hovering.)

(or with simple class switch)

That would probably fall under "facilitating not-great practices". Plus there'd be a bit of extra maintenance complexity to deal with.

Overall, if you're not copacetic with mobile-first, Bootstrap is probably not the best choice for your situation.

PELock commented 9 years ago

I don't understand this stubbornness, please look at the referenced plugin, it detects the touch devices (including those desktop touch), would it be that hard to incorporate the same thing in Bootstrap core? Do you recognize that menus opened when mouse cursor is over them is a STANDARD behaviour for web pages expected by desktop users?

Google results for "bootstrap hover dropdown" - About 378,000 results

There are many hacks and workarounds for this problem, some better than other, why not make it integral part of Bootstrap and make designers decide what to use?

kkirsche commented 9 years ago

I guess my personal opinion is it's a lot of complexity for something that I don't really know the full benefit of.

PELock commented 9 years ago

It's simple - usability. It's quicker to navigate your mouse cursor over the menu with dropdown items than to navigate it and make an extra action.

It's faster to navigate on desktop. It's been like that for years. People are used to it.

Menus like that have been on the web for years and still you will find way more sites with this navigation style than Bootstrap like click dropdown menus.

Leave the default action for mobile & tablets but please add an option for desktops and wide desktops without touch device to open dropdown menus on hover.

mdo commented 9 years ago

Do you recognize that menus opened when mouse cursor is over them is a STANDARD behaviour for web pages expected by desktop users?

No, I don't recognize that as a standard behavior. I recognize it as a less than ideal behavior that leads to just as much frustration as you have right now for dropdowns on click.

It's simple - usability. It's quicker to navigate your mouse cursor over the menu with dropdown items than to navigate it and make an extra action.

Also quicker to trigger than something inadvertently.

This is basic stuff and it's such a standard UX feature for web pages on desktop that by not including it you're confusing end users used to this behaviour on desktop.

Been this way in Bootstrap for nearly all four years of it's life.


Basically it boils down to the fact that hover effects are an involuntary action. I didn't ask to be shown that menu, but you showed it to me anyway. You hover over something to see if it's clickable, not to spontaneously generate a hidden element.

There's a similar problem with hidden offcanvas drawer menus and their triggers. Some are hover-based, some are click based, and even still some use both. So when I hover over a menu button and then click right away, I trigger the menu open and closed in half a second.

There's no standard to adhere to here, and the only real exception I support for toggling on hover are tooltips (which behave that way as their brower defaults anyway). We're aiming to reduce confusion by ensuring the actions users take are specific and expected.

PELock commented 9 years ago

One simple example - https://wordpress.org/

Most of the WordPress themes uses onhover behaviour, and that's a pretty big community to ignore.

Take a look at the most popular WordPress themes that supports both desktop & mobile:

http://themeforest.net/popular_item/by_category?category=wordpress https://wordpress.org/themes/browse/popular/

Now go on and tell them they are were doing it wrong for all those years...

Another example - http://www.amazon.com/

So it's not like a one man crazy idea, but a whole world is using this behaviour and your stubbornness just shows how little you care about the usability and how ignorant you are. And I'm not asking about the default behaviour, just an option to make Bootstrap better for desktop.

Bootstrap supports mobile, tablets and desktop, so why don't make it right or at least give designers choice to use it the way they like it and not force them to use usability features designed for other devices?

mdo commented 9 years ago

So it's not like a one man crazy idea, but a whole world is using this behaviour...

Never said it was, nor did I mean to imply that. Apologies if I did.

and your stubbornness just shows how little you care about the usability and how ignorant you are.

You might want to rethink your approach here.

And I'm not asking about the default behaviour, just an option to make Bootstrap better for desktop.

We don't add options for everything—we try to keep the options in Bootstrap limited. It's like any other product out there—focus is better than sheer number of features.


You're talking a lot about usability, but you've presented zero usability studies on the matter. Instead you're pointing to other projects as the only basis for why we should do something. I'm not saying I'm 100% right, but if you're going to argue one method is more usable than the others, you need to present that argument succinctly and with evidence.

Calling me stubborn and ignorant for defending the deliberate actions we've taken for the last four years of development on Bootstrap doesn't do much to win an argument. Tell me and show me why I'm wrong—I'll happily listen to clear and articulated evidence.

pqt commented 9 years ago

@PELock - It's conditional. Some sites operate better with hover, while others are best off with click to initiate the dropdown menus. That is a call by the designer in charge, but I personally don't see this as being something necessary for bootstrap. Neowin (http://www.neowin.net/) does a good job of being a hover-based navigation to prevent a click-heavy experience, this would be justified in enhancing the usability (but would also suggest that bootstrap support a mega-menu layout out-of-the-box which it obviously does not).

Stripe (https://stripe.com/) has one drop down menu and it's click dependant. This was the best choice for the situation of the site and the navigational flow. I agree with @mdo and his point regarding involuntarily being shown a navigation (as I have done many times on Neowin) but it quite literally grills down to designer preference, as well as the consideration of how difficult it would be to include on a per-project basis for those who do need it. I've added hover to the dropdown in some project instances and it wasn't difficult in the least.

While I'm impartial on the direction of this discussion regardless of the outcome and could reasonably argue both sides, I don't think it's needed in the core.