jQuery HoverSlide Tabs

January 04, 2020 No comments jQuery Plugin Hover Slide

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


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() {
            "left": "-=40px"
        }, 200);
    $(".tab").mouseout(function() {
            "left": "+=40px"
        }, 200);

    $(".tab-left").mouseover(function() {
            "left": "+=40px"
        }, 200);
    $(".tab-left").mouseout(function() {
            "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

3.3. Attach plugin to your tabs:

    backgroundColor: "#2196F3"

    top: 120,
    backgroundColor: "#F1C40F"

    top: 180,
    backgroundColor: "#f44336"

    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.

{{ message }}

{{ 'Comments are closed.' | trans }}