Sticky Side Tab Navigation With jQuery - hoverSlideJS

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.