Usage
navHighlighter will create a subtle underline on all of the active navigation links letting your users know where they are on your page. When you hover the links, or scroll between the sections of your website, the underline will animate in.
Getting Started
Download jquery.navHighlighter.js from GitHub and copy the files into the JavaScript folder in your directory.
Add navHighlighter's style sheet to the head of your HTML document. Make sure you link it before your own as it has default styling included and you don't want it to overwrite your CSS.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navHighlighter</title>
<link rel="stylesheet" href="styles/navHighlighterStyle.css">
</head>
<body>
Include a link to jQuery and a link to plugin at the bottom of your HTML document before the closing body tag. Make sure you properly link from your directory.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.navHighlighter.js"></script>
How It Works
navHighlighter works by adding and removing the class of ".nav-active" to the different sections of your website. For the plugin to work, add a class of ".navHighlighter" to the unordered list that holds your navigation links.
<nav class="top">
<ul class="navHighlighter">
<li><a href="#usage">Usage</a></li>
<li><a href="#gettingStarted">Getting Started</a></li>
<li><a href="#howItWorks">How It Works</a></li>
<li><a href="#customize">Customize</a></li>
</ul>
</nav>
Customize
navHighlighter wouldn't be great if you couldn't customize it to suit the look of your site. You can adjust the colour, the height and the blur of the underline. You can adjust the colour using any method (hex code, rgb value, name, etc.)
First, call the function within the <script></script> tags in your HTML or main Javascript file. When you call the function, make sure you set it to select the body element. Then update your options as you see fit!
<script>
$(function() {
$('body').navHighlighter({
underlineColour : 'red',
blur : '2px',
height : '7px'
});
});
</script>
* Please note that the demo page uses the plugin defaults and some additional CSS and jQuery that is not included in the plugin. If you want the code for the sticky nav, I've included all the files for the demo page, feel free to take the code included in the script.js and docs.css files. Thanks!
Download
To download, head over to GitHub!