Bootstrap dropdown menu on hover plug-in: 5 demos
In the dropdown menu tutorial of Bootstrap, I showed seven demos of the menus that appeared as you click the dropdown (buttons or link). This is the default behaviour of the dropdown component that comes with Bootstrap framework. If you want to open the dropdown menu as the mouse hovers over the button or link, you may use a plug-in.
In this tutorial, I am going to show you such a plug-in that will open the dropdown menu as you bring the mouse over a button, button group or split button.
A simple demo of Bootstrap dropdown at hover state
For enabling the menu opened in the hover state, you need to include the hover plug-in’s JS file besides Bootstrap and jQuery libraries. You may download this JS file by going to the plug-in page and download the package or simply go to any demo page below, view source the demo page and locate the bootstrap-hover-dropdown.js file. Save it in your system.
See the following demo online where a menu is created with a few items. Bring over the mouse over Products and it will open the dropdown:
See online demo and code
So, after including the libraries and plug-in file, the only difference between simple menu that opens by clicking and this one is the data-hover=”dropdown” data attribute:
|
1 |
<button class="dropdown dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Products <b class="caret"></b></button> |
This time, rather than using a simple button as used in above example, I have created a top navbar with a few main and inner menu items. Among those, as you bring the mouse over the “Bootstrap” item, it will open up the dropdown at hover state. The purpose is to show the hover dropdown menu in an “actual” navbar:
See online demo and code
You can see, the Bootstrap is showing the dropdown menu at hover state while “About” is not. This is because the data-hover=”dropdown” is only used in the “Bootstrap” markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<li class="dropdown"> <a href="https://www.jquery-az.com/bootstrap-tips-tutorials/" class="dropdown-toggle" data-toggle="dropdown" role="button" data-hover="dropdown" aria-haspopup="true" aria-expanded="false">Bootstrap <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="https://www.jquery-az.com/bootstrap-carousel-5-single-multiple-horizontal-and-vertical-sliding-demos/">Carousel</a></li> <li><a href="https://www.jquery-az.com/bootstrap-form-customized-styles-6-online-examples/">Forms</a></li> <li role="separator" class="divider"></li> <li><a href="https://www.jquery-az.com/bootstrap-select-5-beautiful-styles/">Select</a></li> </ul> </li> |
In this demo, the button dropdowns are created by using Bootstrap standard classes. In addition, the data-hover=”dropdown” data attribute is also added in each button so it opens up at mouse hover state. See the demo and code online:
See online demo and code
You may use this plugin with button groups as well. The process remains the same, simply add the data-hover=”dropdown” to the dropdown button in a group of buttons. See the following demo:
See online demo and code
The following markup is used for creating button group hover dropdown:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"> Hover Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Bootstrap</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">HTML</a></li> </ul> </div> |
A demo of using in Bootstrap tabs
And of course, you may use this hover state in tabs of Bootstrap that contains dropdown buttons. Again, simply add the data-hover=”dropdown” attribute in the button tag where you intend to open the menu at hover state. See this demonstration:
See online demo and code
A split button is created in the tabs where the split part is given the data-hover=”dropdown” attribute. As you bring the mouse over split part of the button, it will open the menu at hover state. If you want to open for both buttons, just add this attribute in the other button as well.