CODEWITHSUNDEEP
htmlcssbootstrap-4
Owais Idrees
Owais Idrees

Reputation: 107

How to open dropdown on hover in bootstrap 4

Right now my navigation drop down can open on click.

I want it to open upon hover. How do I do this?

Upvotes: 9

Views: 21164

Answers (6)

Kellan Martin
Kellan Martin

Reputation: 26

While I appreciate the answers to this question, the answers given are seemingly not the best. This is because these answers are disregarding accessibility.

Notice that, when using only CSS to make the dropdown show on .nav-link hover, the aria-expanded parameter on the .nav-link element does not change to true.

You must use some JS then in order to have the full range of accessibility functionality.

Below is what I have come up with to combat this.

// header_scripts.js

$('body').on('hover', '.nav-item.dropdown', function() {
    $(this).find('.dropdown-toggle').dropdown('toggle');
});


/* header.css */

.dropdown-menu {
    margin: 0 0 0 0;
}

The above code should provide the same functionality that you are seeing in the other answers to this question, but with full accessibility concerns.

The CSS I gave is very general and has pretty low specificity so work with that as you see fit.

Upvotes: 0

EHoltz
EHoltz

Reputation: 21

I got this solution using Angular with ng-bootstrap and bootstratp:

CSS:

.dropdown:hover>.dropdown-menu {
display: block;}

HTML:

      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
          Parent</a>
          <div ngbDropdownMenu class="dropdown-menu">
            <a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
            <a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
          </div>
      </li>

So, if don't use the CSS property, the dropdown will happens only when click on parent link.

Upvotes: 0

Xahed Kamal
Xahed Kamal

Reputation: 2223

Below css works fine

.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;   // Add this, to prevent clicking dropdown's default click function
}

Upvotes: 6

Strangegroove
Strangegroove

Reputation: 250

The css from Znaneswar works great but I would add this line as well.

.dropdown-menu {
  margin: -0.125rem 0 0;
}

The dropdown is spaced 0.125rem away from the element that spawns the dropdown. So you'll have a hard time navigating from the link to the dropdown without it disappearing when you mouse over that gap.

And if you want the dropdown link to actually be a link as well, just remove this attribute from the a tag

data-toggle="dropdown"

Upvotes: 7

Znaneswar
Znaneswar

Reputation: 3387

simply add following css

.dropdown:hover>.dropdown-menu {
 display: block;
}

fiddle

.dropdown:hover>.dropdown-menu {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
   <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
 
<ul class="navbar-nav">

  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown link
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </li>
</ul>
</nav>

Upvotes: 20

tigigti
tigigti

Reputation: 17

<div class="dropdown">
...
</div>

You could try this with jQuery:

$(".dropdown").hover(function(){
$(this).addClass("show");
});

Upvotes: 0

Related Questions