Sticky Hoverable Side Navigation with jQuery

Simple, easy to use jQuery plugin that lets you create Sticky Hoverable Side Navigation with cool sliding effect on hover.

Plugin Overview

Plugin: hoverSlide
Author: jsfanatik
Licence: MIT Licence
Published: April 20, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version

File Type: zip archive (HTML & JavaScript)
Package Size: 99.2 KB

How to Use Sticky Hoverable Side Navigation :

1. Load the jQuery and hoverSlide.js file into HTML document.

<!-- jQuery -->
<script src=""></script>

<!-- hoverSlide JS -->
<script src="hoverSlideJS/hoverSlide.js"></script>

2. Build HTML structure for navigation and add your links into it like below.

    <div id="click1-tab" class="tab tab1"><a href="#"> HOME </a></div>
    <div id="click2-tab" class="tab tab2"><a href="#"> TUTORIALS </a></div>
    <div id="click3-tab" class="tab tab3"><a href="#"> PLUGINS </a></div>
    <div id="click4-tab" class="tab tab4"><a href="#"> BLOG </a></div>

3. Call the plugin in jQuery document ready function to active the navigation and done.

        backgroundColor: "#2196F3"

        top: 120,
        backgroundColor: "#F1C40F"

        top: 180,
        backgroundColor: "#f44336"

        top: 240,
        backgroundColor: "#555"

Be the first to comment

Leave a Reply

Your email address will not be published.


nine − seven =

This site uses Akismet to reduce spam. Learn how your comment data is processed.