1. Introduction
hoverSlide is a lightweight jQuery plugin for creating hover tabs on the right side of the website.
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() {
$(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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}