Sticky Side Tab Navigation With jQuery - hoverSlideJS
File Size: | 202 KB |
---|---|
Views Total: | 3656 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

hoverSlideJS is a small (<1kb) yet highly customizable tab navigation designed for one page scroll website & single page web app.
The plugin takes advantage of JavaScript and CSS to create sticky navigation tabs that smoothly slide in/out on mousehover/mouseout.
How to use it:
1. Load the hoverSlide.js plugin after the latest jQuery library has been loaded in the document.
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"> </script> <script src="hoverSlideJS/hoverSlide.js"></script>
2. Create the HTML for the tab navigation.
<div id="click1-tab" class="tab tab1"> HOME</div> <div id="click2-tab" class="tab tab2"> JQUERY</div> <div id="click3-tab" class="tab tab3"> SCRIPT</div> <div id="click4-tab" class="tab tab4"> BLOG</div> <div id="click5-tab" class="tab tab5"> ABOUT</div>
3. Initialize the plugin on the navigation items. That's it.
$(".tab1").hoverSlide({ backgroundColor: "#2196F3" }); $(".tab2").hoverSlide({ top: 120, backgroundColor: "#F1C40F" }); $(".tab3").hoverSlide({ top: 180, backgroundColor: "#f44336" }); $(".tab4").hoverSlide({ top: 240, backgroundColor: "#8E44AD" }); $(".tab5").hoverSlide({ top: 300, backgroundColor: "#34495E" });
4. All possible options to customize the tab navigation.
$("SELECTOR").hoverSlide({ position: "fixed", color: "white", backgroundColor: "#abc", padding: "15px", font:"400 15px Lato, sans-serif", lineHeight: "1.8", left: "", right: "-50px", width: "150px", borderRadius: "5px", top: "60px", zIndex: 99, opacity: "", cursor: "pointer" });
This awesome jQuery plugin is developed by jsfanatik. For more Advanced Usages, please check the demo page or visit the official website.