Smart Header Navigation Plugin With jQuery - Toggle NavBar
File Size: | 6.28 KB |
---|---|
Views Total: | 1340 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Toggle NavBar is a jQuery plugin for creating a smart sticky header navigation that slides/fades out when the user scrolls down the page and reveals again when scrolling up.
How to use it:
1. Create a header navigation for your website.
<div id="navbar"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
2. Include jQuery library and the jQuery Toggle NavBar plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="build/toggleNavBar.js"></script>
3. Initialize the plugin with default options.
$('#navbar').toggleNav();
4. Specify the animation type & speed.
$('#navbar').toggleNav({ // true: slider // false: fade slideEffect : true, // animation speed (number) limit of speed is 5000. speed : 300 });
5. Callback functions.
$('#navbar').toggleNav({ // options here }, function(){ // callback when nav showed }, function(){ // callback when nav hide });
This awesome jQuery plugin is developed by firstpersoncode. For more Advanced Usages, please check the demo page or visit the official website.