HoverLine jQuery Plugin – A slick animated hover line for your NavBar
In the past few days, I’ve been getting my hands dirty with jQuery for the development of a particular website and one of the things that I developed was a sticky hover line for the site’s menu.
And as you probably know, a jQuery function is (much) easier to use when it is a plugin, so here we are..
If you still haven’t understood what this plugin does, check out the demo page and hover your mouse over one of the menus.
As a bonus, this plugin also gives you an option to create a menu from a list of links, in case you have trouble doing that with CSS alone. So, lets go through the motions now..
- Here is the HTML markup
<div id="navbar">
<ul>
<li><a href="#ex1">Home</a></li>
<li><a href="#ex1">Blog</a></li>
<li><a href="#ex1">Portfolio</a></li>
<li><a href="#ex1">Projects</a></li>
<li><a href="#ex1">Design</a></li>
</ul>
</div>
- Now, include the jQuery and hoverline js files (Download links at the bottom of the post)
<script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/hoverline.js"></script>
- Turn the list(markup) into a menu (Skip if you have already created a CSS menu)
$('#navbar').makeNavbar();
- Finally, we add the hover effect to the menu
$('#navbar').hoverline();
Voila!! there you have it, a Navbar with a funky hoverline.
Options
By the way, our plugin can take a number of options, here is a list of all the options it can take alongside their default values.
$('#navbar').hoverline({
'color' : '#333',
'height' : '2px',
'start' : '1',
'speed' : '200',
'border' : 'none',
'borderwidthside' : '1px',
'borderwidthtop' : '1px',
'borderstyle' : 'solid'
});
A detailed explanation on using these options can be seen in the demo page
Downloads:
There is quite a long story behind my eventual decision to develop this app. Last year, during an event in my college we decided to put up a TweetWall, but the staff in charge wanted to filter the tweets, make sure nothing “inappropriate” showed up…
