Bootstrap 4 NavBar make Rollover for DropDown Navigation and Clickable Top Link

This explains how to change the default Bootstrap 4 NavBar so that any drop down is activated by a mouse rollover rather than an on-click.  It also shows how to change the top level navigation link to be clickable.

The default behaviour of the Bootstrap 4 navigation is any drop down has to be clicked for the drop down to work.  The Bootstrap version that I am currently using is version 4.3 which you can see at:

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

If you look at the given example, part of the navbar is the drop down code:

 <li class="nav-item dropdown">
        <a class="nav-link 
                  dropdown-toggle" 
                  href="#" 
                  id="navbarDropdown" 
                  role="button" 
                  data-toggle="dropdown" 
                  aria-haspopup="true" 
                  aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>

To allow mouse rollover, add in the following styles as follows:

<style>
.dropdown:hover .dropdown-menu {
display: block;
}
</style>

Now remove the line data-toggle=”dropdown”  in the dropdown code which will make the top link clickable.

So that should be that.  Now a mouse rollover will cause the drop down to appear, and the top link is clickable.

A simple Javascript Submit and Validation example

The following HTML script illustrates a simple Javascript validation and submit script that checks inputs on the PC before it is submitted to the server.  You might use this method on a web site before submission to the PHP script.  The Javascript displays a nice error message on submission if there are any errors and it is quite easy to add more tests when other text boxes are added.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Submit a form using Javascript with input validation</title>

<script language=”javascript” type=”text/javascript”>
<!–

//——————————————–
//Javascript that will submit the form when all entries are valid
function button_onclick(frmCreate) {

var themessage = “Error in entries : “;
var isOK = true;

if ( frmCreate.txtItem_Number.value == “” ) {
themessage = themessage + “\n” + “* Enter PayPal item code”;
isOK = false;
}

if ( frmCreate.txtItem_Name.value == “” ) {
themessage = themessage + “\n” + “* Enter PayPal item name”;
isOK = false;
}

if ( isOK == false ) {
window.alert(themessage);
} else {
frmCreate.submit(frmCreate);
}

}

//——————————————–
//Checks if the entry is numeric
function isNumeric(inputVal) {
numeric = true;
inputStr = inputVal.toString();
for (var i = 0; i< inputStr.length; i++) {
var oneChar = inputStr.charAt(i);

if (oneChar < “0” || oneChar > “9”) {
return false;
}

}

if (numeric == false) {
return false; }
else {
return true; }

}

//——————————————–
function LowerLimit_onblur(frmCreate) {
if ( !isNumeric( frmCreate.txtLowerLimit.value ) ) {
window.alert(“Enter a integer number”);
frmCreate.txtLowerLimit.value = “”;
frmCreate.txtLowerLimit.focus();
}
}

//–>
</script>

</head>
<body>

<!– START OF MAIN FORM –>
<form name=”frmCreate” method=”post” action=”test.html”>

<input type=”button” name=”Create” value=”Create” language=”javascript” onClick=”return button_onclick(frmCreate)” />

<br/><br/>
<table>
<tr>
<td>
<strong>Product Item Reference</strong>
</td>

<td>
<input type=”text” name=”txtItem_Number” />
</td>
<tr>

<tr>
<td>
<strong>Product Item Name</strong>
</td>

<td>
<input type=”text” name=”txtItem_Name” size=”50″ /><br/>
</td>
</tr>

<tr>
<td>
<strong>Enter lower limit</strong>
</td>
<td>
<input type=”text” name=”txtLowerLimit”  value=”5″ size=”3″  LANGUAGE=”javascript” onBlur=”return LowerLimit_onblur(frmCreate)” />
</td>

</table>
</form>
<!– END OF MAIN FORM –>

</body>
</html>

Creating a different rollover for an href using a class

Here are a couple of ways of creating a different rollover effect for an href link.

Method 1 using a class

<style type=”text/css”>
a.leftLink
{
color: #00f;
text-decoration: none
}

a.leftLink:hover
{
color: #f90;
text-decoration: underline
}
</style>

and this is used as follows :

<a href=”#”>This is a link</a>

or

Method 2 using a class in a div

and this is used as follows :

<style type=”text/css”>
.leftLink { margin-top:5px;margin-bottom:5px;font-size:small; }
.leftLink a { color:White; }
.leftLink a:hover { color:#ff9933; }
</style>

<div><a href=”#”>This is a link</a></div>