Twitter Bootstrap: Dropdown Menus Hover for Desktop, Click for Tablets/Phones?

Question

There seem to be many questions/answers on how to change Twitter Bootstrap's dropdowns from appearing on a click to appearing on a hover. The builders of Bootstrap have a good reason for using click instead of hover -- hover doesn't work on most tablets & phones. However, one of the reasons why I am using Bootstrap is for its responsive features. I want one site that can be viewed on desktops, tablets and phones. Although clicking to get the dropdown is necessary for tablets and phones, it is not the expected behavior for desktops. I'd like my site to be responsive, but not at the expense of having to retrain the users!

Is there a way to serve up hover dropdowns for desktops and click dropdowns for tablets and phones?

Answer 1

I created a plugin (working on a couple refinements, but it definitely works as is) that allows dropdowns to work on hover, but it doesn't interfere with Twitter Bootstrap's click event, so you can safely bind both, which essentially means if there is a mouse, it will activate on hover, but if there's not a mouse (i.e. a touchscreen on a tablet), it will still activate when clicked.

I have the plugin hosted on GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

It works by explicitly calling it, but I'm going to tweak the code to work with data-attributes in the near future.

Answer 2

You can with "Responsive utility classes"

http://twitter.github.com/bootstrap/scaffolding.html at the bottom of the page

Answer 3

I was searching exactly for this. And I've found better solution ( I think ). We can easily do this using awesome Modernizr.js library. We can detect the touch screen device by the below function.

function is_touch_device() {
  return !!('ontouchstart' in window);
}

And then we can disable the URL in the hyperlinks dynamically via Javascript either by changing the location to "#" or by preventing the default action of the parent menu items. Final code would be as below.

$(document).ready(function() { 

    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
    if(is_touch_device()) { 

        $('#mainmenu li > ul').each(function (index, ev) {
            /* Option 1: Use this to modify the href on the <a> to # */
            $(ev).prev('a').attr('href' ,'#');  

            /* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
            $(ev).prev('a').click(function(event) {
                event.preventDefault();
            });
        });
    }

});

For more details, you can see this link I do believe someone will vote me UP :-)

Thanks