Post by A Long Display Name Here on Apr 2, 2013 14:06:45 GMT -6
Hello! The code we are using is as follows. You should put this in your CSS file, or between
<style type="text/css"></style> tags.
/* Slide Tab Left */
#slidingtab { position: fixed; top: 30%; left: -180px; width: 200px; height: auto; border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 0px; z-index: 3; transition: .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; }
/*Left should be the same value, only in negative numbers, as the content block you’re trying to hide.*/
#slidingtab:hover { left: 0px; transition: .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; }
/*This makes it slide out. The transitions listed here already are Chrome, Safari, Firefox, and default. Left being set to zero sets it to the default left side of the border.*/
#tabs_content_block { font-size: 9px; font-family: georgia; display: block; width: 180px; height: auto; background: #3f3627; color: #cec5af; float: left; padding: 0px !important; text-align: justify; .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; border-radius: 0px 0px 10px 0px; -moz-border-radius: 0px 0px 10px 10px; z-index: 100; }
/*This is the content block coding.*/
#slidingtab_tab { display: block; width: 20px; height: auto; padding-top: 2px; padding-bottom: 2px; text-align: center; background: #3f3627; color: #cec5af; float: right; border-top-right-radius: 10px; border-bottom-right-radius: 10px; .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; }
/*This is the tab.*/
This is the CSS for the tab. The content between
/* and
*/ are comments — anything between those two markings will not show up on your forum/site, nor will it affect the code itself.
.5s refers to how fast or slow you want the tab to slide out. Areas I've marked in
red are values you need to change based on what the font face & colour scheme are of your forum, and areas I've marked in
purple are values you need to change for how wide or narrow you want the tab box and content box to be.
The tab itself is as follows:
<div id="slidingtab">
<div id="tabs_content_block"><p style="padding-left: 5px!important; padding-right: 5px; padding-top: 2px; padding-bottom: 2px;">Place the content to be hidden here.</p></div>
<div id="slidingtab_tab" style="display: inline;">This is the tab that you see at first. This can be an image or text. </div>
</div>
This will need to go in your global footers, or under any code that dictates the body of the forum.
Credit goes to jitaroo and drawgirldraw for helping with this code.
If you use it, please credit them & us. Thank you!