Bootstrap is one of the most popular, if not the most popular, front-end responsive HTML/CSS/JS frameworks for developing responsive websites. It’s incredibly easy to use and has a huge community behind it so there’s no shortage of documentation, code snippets, and tutorials floating around online.
I am full of praise for Bootstrap but I do have one gripe: the dropdown menus simply don’t function the way I’d like.
Normally, when interacting with a dropdown menu item, I would expect it to expand when you hover the menu item with your mouse. The creators of Bootstrap made a conscious design decision and instead require a click for the menu to expand. Not only that, when browsing on a touch device such as an iPad, once you do click to expand a dropdown, there’s no way to close it without clicking a link somewhere on the page which would likely be perceived an as annoying glitch from a user perspective.
Here’s a little jQuery snippet that solves both of these problems in one shot and will allow your visitors to:
- Expand the dropdown with a mouse hover.
- Close an expanded dropdown by clicking anywhere on the page, on touch devices.
// Mouseover Toggle for Bootstrap Nav Menu
$(document).ready(function() {
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
});
If you also find the default Bootstrap dropdown behavior doesn’t quite function the way you’d like, this simple little snippet should solve that problem for you.