6 Examples to Add Hover Line in Horizontal Menus by jQuery

The hover line plugin for menus

The jQuery hover line plug-in can be used for adding the horizontal line at the top of 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 the 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 the 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.

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 the 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:

  <script type="text/javascript">

$(document).ready(function(){

                $('.navbar').makeNavbar();

                $('#hoverline-demo').hoverline();

 

});

                </script>

Step 3:

Write the markup for menu items:

<div class="ex-inner"><div class="navbar" id="hoverline-demo">

                                <ul>

                                                <li><a href="#">jQuery</a></li>

                                                <li><a href="#">Bootstrap</a></li>

                                                <li><a href="#">HTML</a></li>

                                                <li><a href="#">CSS</a></li>

                                                <li><a href="#">JavaScript</a></li>

                                </ul>

                </div>

A demo of using start option for highlighting a specific menu item

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

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

<script type="text/javascript">

$(document).ready(function(){

                $('.navbar').makeNavbar();

        $('#hoverline-demo').hoverline({'start' : '2'});

});

</script>

A demo of specifying the color of the underline at the 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.

The script:

<script type="text/javascript">

$(document).ready(function(){

                $('.navbar').makeNavbar();

        $('#hoverline-demo').hoverline({'start' : '4','color' : 'green'});

});

</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 the 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:

$(document).ready(function(){

   $('.navbar').makeNavbar();

    $('#hoverline-demo').hoverline({'start' : '3','color' : '#D2D200','speed' : '800'});

});

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:

The code:

$(document).ready(function(){

        $('.navbar').makeNavbar();

        $('#hoverline-demo').hoverline({'start' : '3','color' : 'rgb(64,128,128)','speed' : '800','height': '7px'});

});

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

A demo of using border properties in line

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