jQuery HoverSlide Tabs

1. Introduction

hoverSlide is a lightweight jQuery plugin for creating hover tabs on the right side of the website.

Jquery hover slide

2. Plugin Overview

Library	hoverSlide
Author	jsfanatik
Licence	MIT Licence
Dependencies	jQuery 1.3.1 or Latest version

Demo

3. How to install and use hoverSlide jQuery plugin

Follow the below steps to install hoverSlide jQuery plugin on your website.

3.1. Include jQuery framework into your HTML document:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

3.2. Create structure for tabs:

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

3.3. Add simple JavaScript or include it from external file:

$(document).ready(function() {
    $(".tab").mouseover(function() {
        $(this).animate({
            "left": "-=40px"
        }, 200);
    });
    $(".tab").mouseout(function() {
        $(this).animate({
            "left": "+=40px"
        }, 200);
    });

    $(".tab-left").mouseover(function() {
        $(this).animate({
            "left": "+=40px"
        }, 200);
    });
    $(".tab-left").mouseout(function() {
        $(this).animate({
            "left": "-=40px"
        }, 200);
    });
});

(function($) {
    $.fn.hoverSlide = function(options) {

        var settings = $.extend({
            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"
        }, options);

        return this.css({
            position: settings.position,
            color: settings.color,
            backgroundColor: settings.backgroundColor,
            padding: settings.padding,
            font: settings.font,
            lineHeight: settings.lineHeight,
            left: settings.left,
            right: settings.right,
            width: settings.width,
            borderRadius: settings.borderRadius,
            top: settings.top,
            zIndex: settings.zIndex,
            opacity: settings.opacity,
            cursor: settings.cursor
        });
    };
}(jQuery));

3.3. Attach plugin to your tabs:

$(".tab1").hoverSlide({
    backgroundColor: "#2196F3"
});

$(".tab2").hoverSlide({
    top: 120,
    backgroundColor: "#F1C40F"
});

$(".tab3").hoverSlide({
    top: 180,
    backgroundColor: "#f44336"
});

$(".tab4").hoverSlide({
    top: 240,
    backgroundColor: "#555"
});

4. Conclusion

In this article, we presented hoverSlide jQuery plugin that can be used to add some hover-links into your website or create a simple menu.