smartmenus.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/.
Smartmenus is a jQuery solution (www.smartmenus.org which introduces the possiblility of setting the toplevel button with hover and as a link on desktop computers but with some added versatility with touchscreen devices.
On touchscreen computers it uses a jQuery double-click method on the toplevel button. The first click opens/reveals a sublevel item, the second click sends you to the page as opposed to simply closing the menu (like as an activator).
Although at first this might seem like the optimal solution, as you play with it and compare it with the more common click to activate, click to close, you kind of wonder whether it contradicts normal operation of click behavior. To be determined.
To enable smartmenus you download and include the library script files then add a couple ids into the nav code. You can even drop the bootstrap drop-toggle class and data attributes, something like:
<div id="main-nav" class="navbar navbar-default "> <div class="fluid-container" style="padding: 0px;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul id="main-menu" class="nav navbar-nav n/avbar-justified nav/bar-center "> <li><a href="smartmenus.php">Home</a></li>