FBL's Sliding Tabs

View code Play Walkthrough

Description

This is a walkthrough for firebender-layouts's trademark 'sliding tabs'.

0 Comments

(close)
 
<div id="lefthideralign">
<div class="lefttabbody" id="lefttabtop">
<div class="lefttabpull" id="leftpulltop">
<span class="leftpulltext">Tab One</span>
</div><div class="lefttabinner">
<h1>{text:Blurb1Title}</h1>Let's just fill this with some random dummy text.  It's not important what goes in here, it can be anything.  You might want to use {Description} if this is a tumblr layout, or you can add {text:CustomBlurb} if you add the corresponding meta to let people use that.  You might also want to give them headings...<br><br>A custom heading, if you're coding for tumblr, or just type it in by hand if you're using this somewhere other than tumblr.  Whatever.  The whole point of these things is that they're flexible.
</div></div> 
<div class="lefttabbody" id="lefttabbottom">
<div class="lefttabpull" id="leftpullbottom">
<span class="leftpulltext">Tab Two</span>
</div><div class="lefttabinner">
If you're coding for tumblr and you're like me, you may want to stick a blogroll in here.  That's an entirely different topic, though, you'll have to read a blogroll tutorial from someone else, or wait until I publish a blogroll tutorial of my own (which honestly I won't do unless someone ASKS me to).  But anyway, you can put absolutely whatever the heck you want into these tabs, seriously anything, whatever.  But they look really ugly just how they are at the moment, not to mention if you type <br>a<br>whole<br>l<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>t<br>it will spill down the bottom and you won't be able to read all of it.  Let's fix that.
</div></div></div>
 
<div id="righthideralign">
<div class="righttabbody" id="righttabtop">
<div class="righttabpull" id="rightpulltop">
<span class="rightpulltext">Tab<br><br>One</span>
</div><div class="righttabinner">
<h1>{text:Blurb1Title}</h1>Let's just fill this with some random dummy text.  It's not important what goes in here, it can be anything.  You might want to use {Description} if this is a tumblr layout, or you can add {text:CustomBlurb} if you add the corresponding meta to let people use that.  You might also want to give them headings...<br><br>A custom heading, if you're coding for tumblr, or just type it in by hand if you're using this somewhere other than tumblr.  Whatever.  The whole point of these things is that they're flexible.
</div></div> 
<div class="righttabbody" id="righttabbottom">
<div class="righttabpull" id="rightpullbottom">
<span class="rightpulltext">Tab<br><br>Two</span>
</div><div class="righttabinner">
If you're coding for tumblr and you're like me, you may want to stick a blogroll in here.  That's an entirely different topic, though, you'll have to read a blogroll tutorial from someone else, or wait until I publish a blogroll tutorial of my own (which honestly I won't do unless someone ASKS me to).  But anyway, you can put absolutely whatever the heck you want into these tabs, seriously anything, whatever.  But they look really ugly just how they are at the moment, not to mention if you type <br>a<br>whole<br>l<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>o<br>t<br>it will spill down the bottom and you won't be able to read all of it.  Let's fix that.
</div></div></div>
<div id="finishedhere">We're done here.  You now have two working examples of how the tabs work, you've seen me putz with them and change things and tweak them, you know what you can change for aesthetics and what has to be exactly how it is.  If you have any further questions or need further assistance, just ask me <a href="http://firebender-layouts.tumblr.com/ask" target="_blank">here</a>!</div>
 
#lefthideralign {position:fixed;top:20px;bottom:20px;left:0;width:0;}
#righthideralign {position:fixed;top:20px;bottom:20px;right:0;width:0;}
.lefttabpull {background-color:#000077; position: absolute;left:100%;width:40px;height:200px;border-top-right-radius: 95% 35%;border-bottom-right-radius:95% 35%;}
.righttabpull {background-color:#000077; position: absolute;right:100%;width:40px;height:200px;border-radius:20px 0px 0px 20px;}
#leftpulltop, #rightpulltop {top: 25%;margin-top: -100px;}
#leftpullbottom, #rightpullbottom {top: 75%;margin-top: -100px;}
.lefttabbody {position:absolute; top:0;bottom:0; background-color:#000077;width: 540px;right:100%;transition: all 1s;-webkit-transition: all 1s;z-index:2;}
.righttabbody {position:absolute; top:0;bottom:0; background-color:#000077;width: 540px;left:100%;transition: all 1s;-webkit-transition: all 1s;z-index:2;}
.lefttabbody:hover {right:-540px;z-index:5;}
.righttabbody:hover {left:-540px;z-index:5;}
.leftpulltext {text-transform:uppercase;font-family:monospace;display:block;width:150px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-70px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);font-size:1.5em;letter-spacing:3px;}
.rightpulltext {
display:block;
text-transform:uppercase;
font-family:monospace;
font-size:1.5em;
width:1.2em;
word-break:break-all;
margin:20px auto;
text-align:center;
}
.lefttabinner, .righttabinner {position:absolute;top:20px;bottom:20px;left:20px;right:20px;overflow:auto;background-color:rgba(255, 255,255,.3);padding: 10px 20px;}
#finishedhere {
width:500px;
margin:50px auto;
text-align:center;
line-height:1.5em;
}

5x 10x 15x 20x

Comment

Description