Bootstrap 4 dropdown on hover
In this tutorial we learn how to implement a bootstrap dropdown menu on mouse hover instead of clicking the button or menu using css.
HTML
<div class="container"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </div> </div> </div>
CSS
.dropdown:hover>.dropdown-menu { display: block; } .dropdown>.dropdown-toggle:active { /*Without this, clicking will make it sticky*/ pointer-events: none; }
Bootstrap 3 Dropdowns On Hover using javaScript.
Add the following Javascript to your external js file.
$(document).ready(function() { var navbarToggle = '.navbar-toggle'; // name of navbar toggle, BS3 = '.navbar-toggle', BS4 = '.navbar-toggler' $('.dropdown, .dropup').each(function() { var dropdown = $(this), dropdownToggle = $('[data-toggle="dropdown"]', dropdown), dropdownHoverAll = dropdownToggle.data('dropdown-hover-all') || false; // Mouseover dropdown.hover(function(){ var notMobileMenu = $(navbarToggle).size() > 0 && $(navbarToggle).css('display') === 'none'; if ((dropdownHoverAll == true || (dropdownHoverAll == false && notMobileMenu))) { dropdownToggle.trigger('click'); } }) }); });
Bootstrap 4 Dropdowns On Hover using javaScript.
For the Bootstrap 4 version you just need to change the navbarToggle
variable from navbarToggle = '.navbar-toggle'
to navbarToggle = '.navbar-toggler'
, that’s it.
Add the following Javascript to your external js file.
$(document).ready(function() { var navbarToggle = '.navbar-toggler'; // name of navbar toggle, BS3 = '.navbar-toggle', BS4 = '.navbar-toggler' $('.dropdown, .dropup').each(function() { var dropdown = $(this), dropdownToggle = $('[data-toggle="dropdown"]', dropdown), dropdownHoverAll = dropdownToggle.data('dropdown-hover-all') || false; // Mouseover dropdown.hover(function(){ var notMobileMenu = $(navbarToggle).size() > 0 && $(navbarToggle).css('display') === 'none'; if ((dropdownHoverAll == true || (dropdownHoverAll == false && notMobileMenu))) { dropdownToggle.trigger('click'); } }) }); });
Responsive dropdown menu
You can customize this code further as per your requirement.