Home Tutorial Jquery jQuery 'Tab Slide Out' Plug-in


Share on Google+Share on Google+
jQuery 'Tab Slide Out' Plug-in
Posted on: August 11, 2010 at 12:00 AM
In this Section, you will learn how to develop a slide out tab using jQuery plug-in.

jQuery 'Tab Slide Out' Plug-in

In this Section, you will learn how to develop a slide out tab using jQuery plug-in. For developing slide out window we are using "jquery.tabSlideOut.v1.3.js" plug-in. The slide out window is attached with a icon, when you click on it , it expands .This icon is attached with the left boundary of the browser window. You can change it's location to right. The things which you can configure with this plug-in is image's height width, tab location, speed , action etc. The 'action' options are "hover" & "click".


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Tab Slide out
<script src=jquery-1.4.2.js type='text/javascript'></script>
<script src='TabSlideOut/jquery.tabSlideOut.v1.3.js' type='text/javascript'>
<script type="text/javascript">
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'TabSlideOut/contact_tab.gif',//path to the image for the tab
//Optionally can be set using css
imageHeight: '122px', //height of tab image
//Optionally can be set using css
imageWidth: '40px', //width of tab image
//Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll

<style type="text/css">

.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
<!--This style is for web page text color-->
<style type="text/css">
.style1 {
color: #FF0000;
text-align: center;
.style2 {
color: #0000FF;
text-align: left;

<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Demostratiom of Tab Slide Out</h3>
<p>Thanks for checking out jQuery plugin, I hope you find this useful.
<p>This can be a form to submit feedback, or contact info</p>

<h1 class="style1">jQuery 'Tab Slide Out' Plug-in</h1>
<p class="style2">This web page is about the slide out tab. This tab is attached
with boundaries of web page .When you click on it , it will slide out and show
you information tab that gives you information. The plug in we are using here is
<p class="style2"> You can see
example on your left.</p>
<p class="style2"> </p>


Initial State :

When you hover on icon :

Download Source Code

Click here to see demo


Related Tags for jQuery 'Tab Slide Out' Plug-in:

Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 11, 2010

Recommend the tutorial

Advertisements Advertisements