Sidebar with CSS3 transform
- by Malcoda
Goal
I'm working on a collapsible sidebar using jQuery for animation. I would like to have vertical text on the sidebar that acts as a label and can swap on the animateOut/animateIn effect.
Normally I would use an image of the text that I've simply swapped vertically, and switch it out on animation, but with CSS3 transforms I'd like to get it to work instead.
Problem
The problem I'm facing is that setting the height on my rotated container makes it expand horizontally (as it's rotated 90deg) so that doesn't work. I then tried to set the width (hoping it would expand vertically, acting as height), but that has an odd effect of causing the width of my parent container to expand as well.
Fix?
Anyone know why this happens and also what the fix/workaround could be without setting max-widths and overflow: hidden? I've got a fairly good understanding of both html elements behavior and css3, but this is stumping me.
Live Example
Here's a fiddle that demonstrates my problem: Fiddle
The collapse-pane class is what I have rotated and contains the span I have my text inside. You'll notice it has a width set, that widens the border, but also affects the parent container.
The code:
CSS:
.right-panel{
position:fixed;
right:0;
top:0;
bottom:0;
border:1px solid #ccc;
background-color:#efefef;
}
.collapse-pane{
margin-top:50px;
width:30px;
border:1px solid #999;
cursor:pointer;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.collapse-pane span{
padding:5px;
}
HTML
<div class="right-panel">
<div class="collapse-pane">
<span class="expand">Expand</span>
</div>
<div style="width:0;" class="panel-body">
<div style="display:none;" class="panel-body-inner">
adsfasdfasdf
</div>
</div>
</div>
JavaScript (Thought not really relevant)
$(document).ready(function(){
var height = $(".right-panel").height();
$(".collapse-pane").css({marginTop: height/2 - 20});
$('.collapse-pane').click(function(){
if($(".collapse-pane span").html() == "Expand"){
$(".panel-body").animate({width:200}, 400);
$(".panel-body-inner").fadeIn(500);
$(".collapse-pane span").html("Collapse");
}else{
$(".panel-body").animate({width:00}, 400);
$(".panel-body-inner").fadeOut(300);
$(".collapse-pane span").html("Expand");
}
});
});
I hope this was clear...
Thanks for any help!
