Navigation Menu Highlighting Plugin - visualNav

visualNav is a jQuery plugin that allows you to create a sticky horizontal or vertical navigation menu which is able to highlight both the currently viewed content & other content in view when scrolling down.  visualNav can work with any elements of your page, Integrates easily with Bootstrap!

How to use :

1. Include jQuery Library, jQuery mousewheel plugin and visualNav.js in your header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.visualNav.js"></script>

2. Create a nav menu for your content

<div id="sidemenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</div>

3. Main Content

<div id="home">
#HOME CONTENT
</div>
<div id="work">
#WORK CONTENT
</div>
<div id="blog">
#BLOG CONTENT
</div>
<div id="projects">
#PROJECTS CONTENT
</div>

4. Default options.

// use link & targetAttr in case you want to use:
// <div class="link" data-target="#Home">Home</div>
// the link = "div.link" and targetAttr = "data-target"

// Add a link class, as necessary.
link              : 'a',         

// added in case you have link = "div" and attribute something like data-target.
targetAttr        : 'href',      

// to only apply to the link, use the same value as is in the link option.
selectedAppliedTo : 'li',        

// content class to get height of the section.
contentClass      : 'content',   

// class name of links inside the content that act like the visualNav menu (smooth scroll).
contentLinks      : 'visualNav', 

// class name of links that link to external content.
externalLinks     : 'external',  

// if true, the location hash will be updated.
useHash           : true,        

// Classes added to items
// css class added to items in the viewport.
inViewClass       : 'inView',    

// css class applied to menu when a link is selected (highlighted).
selectedClass     : 'selected',  

// css class applied to the content block when it is currently selected in the menu.
currentContent    : 'current',   

// Appearance
// Margin from the end of the page where the last menu item is used (in case the target is short).
bottomMargin      : 100,         

// If true, the contentClass width will be adjusted to fit the browser window (for horizontal pages).
fitContent        : false,    

// add a top offset value (pixels) or jQuery element (height is measured), of any top menu or gap.
offsetTop         : 0,      

// scroll to first item automatically on initialization       
scrollOnInit      : false,        

// Animation
// page scrolling time in milliseconds.
animationTime     : 1200,            

// horizontal, vertical easing; 
// if might be best to leave one axis as swing [ 'swing', 'easeInCirc' ]     
easing            : [ 'swing', 'swing' ], 

// if the user presses any key or scrolls the mouse, the animation will cancel
stopOnInteraction : true,        

// Callbacks
// when the visualNav plugin has finished initializing
initialized       : null,        

// before the animation begins moving to the targetted element
beforeAnimation   : null,     

// when the targetted element is in view and scrolling animation has completed
complete          : null,  

every time the current menu item changes
changed           : null      

Change logs:

v2.5.2 (2015-06-26)

• Preferentially use HTML5 History API. 

v2.5.1 (2015-04-26)

• Preferentially use HTML5 History API. 

v2.5.0 (2015-04-05)

• Add offsetTop option - adds a top offset value (pixels) or jQuery element (height is measured), of any top menu or gap.
• Add scrollOnInit option - prevents initial scroll to top menu item when set to false (default value).
• General code cleanup
• Anchors not inside of content blocks are now clickable
• Modified animationTime option to now accept a function

v2.4.3 (2015-03-15)

• updateHash if useHash set. 

---

This awesome jQuery plugin is developed by Mottie. For more Advanced Usages, please check the demo page or visit the official website.