Sticky Side Tab Navigation With jQuery - hoverSlideJS

File Size: 202 KB
Views Total: 3836
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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.

  backgroundColor: "#2196F3"

  top: 120,
  backgroundColor: "#F1C40F"

  top: 180,
  backgroundColor: "#f44336"

  top: 240,
  backgroundColor: "#8E44AD"

  top: 300,
  backgroundColor: "#34495E"

4. All possible options to customize the tab navigation.

  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.