6 demos to add hover line in horizontal menus by jQuery

The hover line plugin for menus

The jQoery hover line plug-in can be used for adding the horizontal line at the top or any other menu for the items where the mouse is moved.

The plug-in has a few options for setting the line like a simple line, adding a colorful line, adjusting the speed of animation for the line, and also managing the thickness or height of line under the hovered menu item.

You may also set the border of the line. I will show all these options in the demos in the following section.

A simple demo of hover line in menu items

In the example, a few menu items are created. Bring the mouse over any item and a line under that menu item will display with default options.

See online demo and code

This is how the hover line is created by using jQuery.

Step 1:

Include the jQuery library and plug-in’s JS file in the web page along with CSS file of the plug-in:

<link href=”css/hoverline/style.css” rel=”stylesheet”/>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>

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

You may use your own custom CSS file, of course. (Download the plug-in package from the credit link at bottom)

Step 2:

Initiate the hover line in jQuery code by using makeNavbar method:

 

 

Step 3:

Write the markup for menu items:

 

 

A demo of using start option for highlighting specific menu item

In above example, the first item is underlined by default, as the web page loads. If you want number 2, 3 or other menu item underlined, you may do this by using the start option of hover line plug-in. In this demo, the underline is specified for the Bootstrap menu item which is the second number:

See online demo and code

The following script is used to specify starting item with underline:

 

A demo of specifying the color of underline at hover state

Use the color option in the hover line method of the plug-in for specifying a color. See the following demo where I used green color and also used the start option as 4.

See online demo and code

The script:

 

While the markup remains the same for all examples.

Specifying the speed of hover line

A cool feature of the plugin is that you may specify the speed of animation for the underline. This tells how fast or slow a line should move by using the time in milliseconds. Use the speed option in hoverline method just like I used color and start options. See a demo with all these options:

See online demo and code

Again, only the jQuery code is changed while markup remains the same:

 

Height or thickness of line in menu

The height option can be used to specify the height or thickness of the line for menu items. See this demo where I used different options along with height:

See online demo and code

The code:

 

For variation purpose, I used RGB code for the color option.

 demo of using border properties in line

As you hover mouse over this demo, the line item will move at 1200 milliseconds with 4px height and yellow border, have a look:

See online demo and code

The code:

 

Credits: nakule