Add hover effect in Bootstrap nav by jQuery: 4 demos

The hover effect in Bootstrap navs

This is highly likely that you will use navigation menu whether it is a top, left or right menu as using the Bootstrap framework or any other website that contain links to the main pages, categories etc.

Adding cool hovering effects as a user brings the mouse over any menu item adds good user experience. In this tutorial, I am going to use a jQuery plug-in that is used for adding such effects in the navs that can be Bootstrap navs as well.

See the following section for different types of effects in various menus including menus with dropdowns using Bootstrap framework.

A demo of hover effect in Bootstrap nav

In this example, a few menu items are created by using the <ul>, <li> tags. In each item, the role data attribute, role=”presentation”, is added. Have a look at the hove effect:

Bootstrap hover nav

See online demo and code

In order to use this plug-in, you need to include a few resources including plug-in JS and CSS files. See the <head> section in the demo page along with </body> closing tag.

In the <head> section:

 <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”css/hoverifyBootnav/hoverifyBootnav.css”>

Above the </body> tag:

<script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js”></script>

<script type=”text/javascript” src=”js/hoverifyBootnav/hoverifyBootnav.js”></script>

<script type=”text/javascript” src=”js/hoverifyBootnav/init.js”></script>

You may download the plug-in files here or view source the demo page and download respective JS/CSS file to your system.

The following markup is used for creating links with hover effect:

 

Get the complete code from the demo page.

A demo of navs with dropdown menu

You may also use dropdowns as using this hover effect plug-in. In this demo, nav nav-tabs are used for creating a navigation that also uses a dropdown menu. Have a look, as you hover over the dropdown, it gives the same effect as other navs:

Bootstrap hover nav dropdown

See online demo and code

Following is the markup used:

 

Using with the nav-pills demo

In the following demo, the same number of menu items with a dropdown are created as using the nav-pills. Have a look at the demo and complete code:

Bootstrap hover nav pills

See online demo and code

The markup for this menu remains the same except the class used in the main <ul> tag:

 

In above example, this class was used:

 

A demo of using in vertical menu

In this example, a vertical menu is created with the few menu items. Have a look at the hover effect:

jQuery hover nav vertical

See online demo and code

The markup for creating vertical navs with hover effect: