Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

[Feature] Make Dropdown works with Hover #1029

Closed
dbpolito opened this Issue · 2 comments

3 participants

Daniel Polito Matt Hinchliffe Mark Otto
Daniel Polito

Make a easy way to change Dropdown to work with hover instead of Click. something like $('.dropdown-toggle').dropdown('hover').

I'm using this instead of dropdown.js:

$('.navbar li.dropdown').hover(
    function(){
        $(this).addClass('open').find('ul').stop(true,true).hide().slideDown('fast');
    },
    function(){
        $(this).removeClass('open').find('ul').stop(true,true).slideUp('fast');
    }
);
$('.navbar li.dropdown li').unbind('mouseover').unbind('mouseout');
Matt Hinchliffe

You may find jQuerys hover toggle shortcut has a few edge case issues as it uses the mouseenter event which will not be triggered if the mouse enters from outside the document window - such as if the menu is positioned against the top of the browser and the user moves their mouse from the URL bar - nothing will happen. This can be solved by using the mouseover event.

Hover also has the disadvantage of not being accessible on touch screen devices which has quite an inelegant workaround http://jsfiddle.net/i_like_robots/6JbtX/embedded/result/

Mark Otto
Admin

We purposely avoid using :hover for menus. Hover should tell users that something is clickable, not trigger an event that the user likely didn't want in the first place. It's the same reason we removed hovercards from Twitter.com many months ago.

Mark Otto mdo closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.