javascript.php | style: | opt: | align: | pos:
Bootstrap navbar by default does not employ a hover effect to display the dropdown menu. The following are a group of CSS and JavaScript methods to make hover work on desktop computers and 2:1 devices when using a mouse.
The styles, cerulean thru yeti, are all adapted from and credited to https://bootswatch.com/.
This javascript method sets the hover state to activate based upon the device width you feed it. It works well on descktop computers in mouse mode whether you set the toplevel item to be a link or anchor.
With my 2:1 touchscreen device it works similarly in mouse, normal computer mode. However, if used in touchscreen mode clicking on a button that has been set to be a link takes you directly to that page, as expected, rather than giving you privvy to the sublevel items.
The code (which will need to be enclosed in script tags):
$(document).ready(function () {
var w = $(window).width();
if ( w >= 767 ) {
$('.navbar .dropdown').hover(function () {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(15);
}, function () {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(15)
});
}
});