cwspear.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/.
The CWSpear method, www.cwspear.com is a custom method developed to make the bootstrap navigation activate upon hover in non-touchscreen mode. It includes some other features such as delays (to close) and hoverDelay. See the CWSpear docs for the options. To get it to work you have to include the bootstrap-hover-dropdown.min.js javascript file and add some data parameters to your navigation a href"" code. This is more fully explained in their docs, something like:
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown"
data-hover="dropdown"
data-delay="2500"
data-close-others="false"
>Account <b class="caret"></b></a>
<ul class="dropdown-menu">
...
...
On my regular computer the toplevel dropdown button activates upon hover. If I configure the data-delay to 2500 the dropdown will remain open for 2 1/2 seconds. Is there any real value in that? Regardless of whether I set the target to a link or an anchor, it works like an activator only.
On my touchscreen device whether in mouse or touchscreen mode the toplevel menu item acts as an activator an only responds to click action. In this respect it behaves somewhat less favorably than the simple CSS method.
I also noticed that if I change the CSS class to class="dropdown-toggle disabled" that on my touchscreen 2:1 device the dropdown no longer works in either mode and if I set the toplevel item to a link it sends you to the link page, meaning that you are not privvy to the sublevel items. This is restrictive.