Skip to content

Instantly share code, notes, and snippets.

@ScarletPonytail
Created April 11, 2017 14:38
Show Gist options
  • Save ScarletPonytail/3e22d6295fed802b33d1ad4f243478b9 to your computer and use it in GitHub Desktop.
Save ScarletPonytail/3e22d6295fed802b33d1ad4f243478b9 to your computer and use it in GitHub Desktop.
HTML - jQuery Slide Out Tab
<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