Created
April 11, 2017 14:38
-
-
Save ScarletPonytail/3e22d6295fed802b33d1ad4f243478b9 to your computer and use it in GitHub Desktop.
HTML - jQuery Slide Out Tab
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> | |
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script> | |
<script> | |
$(function(){ | |
$('.slide-out-div').tabSlideOut({ | |
tabHandle: '.handle', //class of the element that will become your tab | |
pathToTabImage: 'images/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: 'click', //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 | |
}); | |
}); | |
</script> | |
<style> | |
.slide-out-div { | |
padding: 20px; | |
width: 250px; | |
background: #ccc; | |
border: #29216d 1px solid; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment