Simple, CSS only solution:
.dropdown:hover>.dropdown-menu {
display: block;
}
When clicked, it will still get the class show toggled to it (and will remain open when no longer hovered).
To get around this properly is to use events and properties reserved to pointer based devices: jQuery's mouseenter, mouseleave and :hover. Should work smoothly, intuitively, while not interfering at all with how the dropdown works on touch based devices. Try it out, let me know if it works for you:
Complete jQuery solution (touch untouched):
Pre v4.1.2 solution (deprecated):
$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});
$('body').on('mouseenter mouseleave','.dropdown',function(e){
var _d=$(e.target).closest('.dropdown');
if (e.type === 'mouseenter')_d.addClass('show');
setTimeout(function(){
_d.toggleClass('show', _d.is(':hover'));
$('[data-toggle="dropdown"]', _d).attr('aria-expanded',_d.is(':hover'));
},300);
});
$('.dropdown a').on('click tap', e => e.preventDefault())
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script><navclass="navbar navbar-toggleable-md navbar-light bg-faded"><buttonclass="navbar-toggler navbar-toggler-right"type="button"data-toggle="collapse"data-target="#navbarNavDropdown"aria-controls="navbarNavDropdown"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><aclass="navbar-brand"href>Navbar</a><divclass="collapse navbar-collapse"id="navbarNavDropdown"><ulclass="navbar-nav"><liclass="nav-item active"><aclass="nav-link"href>Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href>Features</a></li><liclass="nav-item"><aclass="nav-link"href>Pricing</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"hrefid="navbarDropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
Dropdown link
</a><divclass="dropdown-menu"aria-labelledby="navbarDropdownMenuLink"><aclass="dropdown-item"href>Action</a><aclass="dropdown-item"href>Another action</a><aclass="dropdown-item"href>Something else here</a></div></li></ul></div></nav>
v4.1.2 shiplist introduced this change to how dropdowns work, making the solution above no longer work.
Here's the up to date solution for having the dropdown open on hover in v4.1.2 and above:
functiontoggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
functiontoggleDropdown (e) {
const _d = $(e.target).closest('.dropdown'),
_m = $('.dropdown-menu', _d);
setTimeout(function(){
const shouldOpen = e.type !== 'click' && _d.is(':hover');
_m.toggleClass('show', shouldOpen);
_d.toggleClass('show', shouldOpen);
$('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 300 : 0);
}
$('body')
.on('mouseenter mouseleave','.dropdown',toggleDropdown)
.on('click', '.dropdown-menu a', toggleDropdown);
$('.dropdown a').on('click tap', e => e.preventDefault())
<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><navclass="navbar navbar-expand-lg navbar-light bg-light"><aclass="navbar-brand"href="#">Navbar</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto"><liclass="nav-item active"><aclass="nav-link"href="#">Home <spanclass="sr-only">(current)</span></a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdown"role="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
Dropdown
</a><divclass="dropdown-menu"aria-labelledby="navbarDropdown"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Something else here</a></div></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul><formclass="form-inline my-2 my-lg-0"><inputclass="form-control mr-sm-2"type="search"placeholder="Search"aria-label="Search"><buttonclass="btn btn-outline-success my-2 my-sm-0"type="submit">Search</button></form></div></nav>
Important note: If using the jQuery solution, it is important to remove the CSS one (or the dropdown won't close when .dropdown-toggle is clicked or when an menu option is clicked).
Bootstrap 4 CSS-only
None of the CSS only answers work entirely. Either the dropdown menu stays open after click, or there is a gap that makes the dropdown menu hide before you can reach the menu links to click.
Here's the simple CSS only solution:
.navbar-navli:hover.dropdown-menu {
display: block;
}
Remove data-toggle=dropdown from the HTML markup to prevent the dropdown staying open in click. Use mt-0 (margin-top:0) to eliminate the gap above the menu, and make it possible to hover the menu items.
Demo https://www.codeply.com/go/awyU7VTIJf
Complete Code:
.navbar-nav li:hover .dropdown-menu {
display: block;
}
<navclass="navbar navbar-expand-lg navbar-light bg-light">
..
<divclass="collapse navbar-collapse"id="navbarSupportedContent"><ulclass="navbar-nav mr-auto"><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdown">
Dropdown
</a><divclass="dropdown-menu mt-0"aria-labelledby="navbarDropdown"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Something else here</a></div></li></ul></div></nav>
Andrei's "complete" jQuery+CSS solution has the right intent, but it's verbose and still incomplete. Incomplete because while it probably covers all the necessary DOM changes, it's missing the firing of custom events. Verbose because it's wheel-reinventing when Bootstrap already provides the dropdown() method, which does everything.
So the correct, DRY solution, which does not rely on the CSS hack often repeated among other answers, is just jQuery:
$('body').on('mouseover mouseout', '.dropdown', function(e) {
$(e.target).dropdown('toggle');
});
Post a Comment for "How To Implement A Navbar Dropdown Hover In Bootstrap V4?"