Bootstrap Dropdown with Hover

Question

OK  so what I need is fairly straightforward   I have set up a navbar with some dropdown menus in it  using class  dropdown-toggle  data-toggle  dropdown    and it works fine   The thing is it works  onClick   while I would prefer if it worked  onHover    Is there any built-in way to do this

User · Answer

The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.

Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems

_x000D_

$(function(){_x000D_
    function is_touch_device() {_x000D_
        return 'ontouchstart' in window        // works on most browsers _x000D_
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface_x000D_
    };_x000D_
_x000D_
    if(!is_touch_device() && $('.navbar-toggle:hidden')){_x000D_
      $('.dropdown-menu', this).css('margin-top',0);_x000D_
      $('.dropdown').hover(function(){ _x000D_
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); _x000D_
      });   _x000D_
    }_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">_x000D_
    <li><a href="#">menuA</a></li>_x000D_
    <li><a href="#">menuB</a></li>_x000D_
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>_x000D_
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">_x000D_
            <li><a href="">A</a></li>_x000D_
            <li><a href="">B</a></li>_x000D_
            <li><a href="">C</a></li>_x000D_
            <li><a href="">D</a></li>_x000D_
        </ul>_x000D_
    </li>_x000D_
    <li><a href="#">menuD</a></li>_x000D_
    <li><a href="#">menuE</a></li>_x000D_
</ul>

_x000D_

$(function(){_x000D_
  $("#nav .dropdown").hover(_x000D_
    function() {_x000D_
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");_x000D_
      $(this).toggleClass('open');_x000D_
    },_x000D_
    function() {_x000D_
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");_x000D_
      $(this).toggleClass('open');_x000D_
    });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">_x000D_
    <li><a href="#">menuA</a></li>_x000D_
    <li><a href="#">menuB</a></li>_x000D_
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>_x000D_
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">_x000D_
            <li><a href="">A</a></li>_x000D_
            <li><a href="">B</a></li>_x000D_
            <li><a href="">C</a></li>_x000D_
            <li><a href="">D</a></li>_x000D_
        </ul>_x000D_
    </li>_x000D_
    <li><a href="#">menuD</a></li>_x000D_
    <li><a href="#">menuE</a></li>_x000D_
</ul>

_x000D_

User · Answer

I try other solutions  i m using bootstrap 3  but dropdown menu closes too quickly to move over it  supposed that you add class  dropdown  to li  i added a timeout  var hoverTimeout      dropdown   hover function         clearTimeout hoverTimeout         this  addClass  open       function         var  self     this       hoverTimeout   setTimeout function              self removeClass  open           150

User · Answer

The easiest solution would be in CSS  Add something like      dropdown hover  dropdown-menu       display  block      margin-top  0     remove the gap so it doesn t close      Working Fiddle

User · Answer

navbar  dropdown   hover function             this  find   dropdown-menu   first   stop true  true  slideDown 150          function             this  find   dropdown-menu   first   stop true  true  slideUp 105

User · Answer

Bootstrap drop-down Work on hover  and remain close on click by adding property display block  in css and removing these attributes data-toggle  dropdown  role  button  from button tag   x000D   x000D   dropdown hover  dropdown-menu   x000D    display  block  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 4 0 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 4 0 js bootstrap min js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt                                       x000D     lt div class  dropdown  gt  x000D       lt button class  btn btn-primary dropdown-toggle  gt Dropdown Example x000D       lt span class  caret  gt  lt  span gt  lt  button gt  x000D       lt ul class  dropdown-menu  gt  x000D         lt li gt  lt a href     gt HTML lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt CSS lt  a gt  lt  li gt  x000D         lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This is what I use to make it dropdown on hover with some jQuery    document  ready function              navbar-default  navbar-nav  gt  li dropdown   hover function                 ul dropdown-menu   this  stop true  true  slideDown  fast              this  addClass  open           function                 ul dropdown-menu   this  stop true  true  slideUp  fast              this  removeClass  open

User · Answer

The best way of doing it is to just trigger bootstraps click event with a hover  This way  it should still remain touch device friendly       dropdown   hover function           dropdown-toggle   this  trigger  click

User · Answer

An easy way  using jQuery  is this       document  ready function           ul nav li dropdown   hover function             this  find   dropdown-menu   stop true  true  delay 200  fadeIn 200          function             this  find   dropdown-menu   stop true  true  delay 200  fadeOut 200

User · Answer

This will help you make your own hover class for bootstrap   CSS      Hover dropdown     hover drop down input-group-btn ul dropdown-menu margin-top  0px    To avoid unwanted close    hover drop down btn-group ul dropdown-menu margin-top 2px    To avoid unwanted close    hover drop down hover ul dropdown-menu     display  block      Margins are set to avoid unwanted close and they are optional   HTML    lt div class  btn-group hover drop down  gt     lt button type  button  class  btn btn-default  data-toggle  dropdown  gt  lt  button gt     lt ul class  dropdown-menu  role  menu  gt             lt  ul gt   lt  div gt    Don t forget to remove the button attribute data-toggle  dropdown  if you want to remove onclick open  and this also will work when input is append with dropdown

User · Answer

Updated with a proper plugin  I have published a proper plugin for the dropdown hover functionality  in which you can even define what happens when clicking on the dropdown-toggle element   https   github com istvan-ujjmeszaros bootstrap-dropdown-hover    Why I made it  when there are many solutions already   I had issues with all the previously existing solutions  The simple CSS ones are not using the  open class on the  dropdown  so there will be no feedback on the dropdown toggle element when the dropdown is visible   The js ones are interfering with clicking on  dropdown-toggle  so the dropdown shows up on hover  then hides it when clicking on an opened dropdown  and moving out the mouse will trigger the dropdown to show up again  Some of the js solutions are braking iOS compatibility  some plugins are not working on modern desktop browsers which are supporting the touch events   That s why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API  without any hack

User · Answer

This only hovers the navbar when you are not on a mobile device  because I find that hovering the navigation does not work well on mobile divices          document   ready function              ul nav li dropdown    hover function                you could also use this condition     window   width    gt   768         if      navbar-toggle   css  display        none                amp  amp  false       ontouchstart  in document                       dropdown-toggle   this   trigger   click                      function             if      navbar-toggle   css  display        none               amp  amp  false       ontouchstart  in document                       dropdown-toggle   this   trigger   click

User · Answer

So you have this code    lt a class  dropdown-toggle  data-toggle  dropdown  gt Show menu lt  a gt    lt ul class  dropdown-menu  role  menu  gt       lt li gt Link 1 lt  li gt       lt li gt Link 2 lt  li gt        lt li gt Link 3 lt  li gt                                                lt  ul gt    Normally it works on click event  and you want it work on hover event  This is very simple  just use this javascript jquery code     document  ready function              dropdown-toggle   mouseover function                 dropdown-menu   show                    dropdown-toggle   mouseout function             t   setTimeout function                     dropdown-menu   hide               100                dropdown-menu   on  mouseenter   function                     dropdown-menu   show                clearTimeout t              on  mouseleave   function                     dropdown-menu   hide                           This works very well and here is the explanation  we have a button  and a menu  When we hover the button we display the menu  and when we mouseout of the button we hide the menu after 100ms  If you wonder why i use that  is because you need time to drag the cursor from the button over the menu  When you are on the menu  the time is reset and you can stay there as many time as you want  When you exit the menu  we will hide the menu instantly without any timeout   I ve used this code in many projects  if you encounter any problem using it  feel free to ask me questions

User · Answer

Use the mouseover   function to trigger the click  In this way the previous click event will not harm  User can use both hover and click touch  It will be mobile friendly     quot  dropdown-toggle quot   mouseover function          this  trigger  click

User · Answer

Try this using hover function with fadein fadeout animations     ul nav li dropdown   hover function         this  find   dropdown-menu   stop true  true  delay 200  fadeIn 500      function         this  find   dropdown-menu   stop true  true  delay 200  fadeOut 500

User · Answer

You can use jQuery s hover function   You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown   Here s my code     function            dropdown   hover function               this  addClass  open               function               this  removeClass  open

User · Answer

Triggering a click event with a hover has a small error  If mouse-in and then a click creates vice-versa effect  It opens when mouse-out and close when mouse-in  A better solution       dropdown   hover function         if      this  hasClass  open                   dropdown-toggle   this  trigger  click             function         if    this  hasClass  open                  dropdown-toggle   this  trigger  click

User · Answer

For CSS it goes crazy when you also click on it  This is the code that I m using  it also don t change anything for mobile view       dropdown   mouseenter function        if      navbar-toggle   is   visible         disable for mobile view         if    this  hasClass  open         Keeps it open when hover it again                 dropdown-toggle   this  trigger  click

User · Answer

html                  lt div class  dropdown  gt                lt button class  btn btn-primary dropdown-toggle  type  button  data-toggle  dropdown  gt                  Dropdown Example  lt span class  caret  gt  lt  span gt               lt  button gt                lt ul class  dropdown-menu  gt                   lt li gt  lt a href     gt HTML lt  a gt  lt  li gt                   lt li gt  lt a href     gt CSS lt  a gt  lt  li gt                   lt li gt  lt a href     gt JavaScript lt  a gt  lt  li gt               lt  ul gt            lt  div gt     jquery            document  ready  function                                       selector  hover  inFunction  outFunction                      dropdown   hover                   function                                                   this  find  ul   css                            display    block                            margin-top   0                                                                                     function                                                   this  find  ul   css                            display    none                            margin-top   0                                                                                                  codepen

User · Answer

In Twitter Bootstrap is not implemented but you can use the this plugin  Update 1    Sames question here

User · Answer

Hover over the nav items to see that they activate on hover  http   cameronspear com demos twitter-bootstrap-hover-dropdown

[javascript] Bootstrap Dropdown with Hover

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap