Navigation Menu Highlighting Plugin - visualNav
File Size: | 170 KB |
---|---|
Views Total: | 3828 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.