6 demos to add hover line in horizontal menus by jQuery
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ $('.navbar').makeNavbar(); $('#hoverline-demo').hoverline(); }); </script> |
Step 3:
Write the markup for menu items:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(document).ready(function(){ $('.navbar').makeNavbar(); $('#hoverline-demo').hoverline({'start' : '2'}); }); </script> |
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:
1 2 3 4 5 6 7 8 9 10 11 |
<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 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:
1 2 3 4 5 6 7 |
$(document).ready(function(){ $('.navbar').makeNavbar(); $('#hoverline-demo').hoverline({'start' : '3','color' : '#D2D200','speed' : '800'}); }); |
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:
1 2 3 4 5 6 7 |
$(document).ready(function(){ $('.navbar').makeNavbar(); $('#hoverline-demo').hoverline({'start' : '3','color' : 'rgb(64,128,128)','speed' : '800','height': '7px'}); }); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script type="text/javascript"> $(document).ready(function(){ $('.navbar').makeNavbar(); $('#hoverline-demo').hoverline({ 'border' : '#FFFF00', 'borderwidthside':'3px', 'borderwidthtop':'3px', 'borderstyle':'solid', 'start' : '3', 'color' : 'rgb(64,128,128)', 'speed' : '1200', 'height': '4px'}); }); </script> |
Credits: nakule