I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap.
Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along with the sidebar once it's pulled out?
I have created a toggleSidebar icon link to achieve this, but I encounter two issues:
- I am unable to make it align with the sidebar using float: left or display: inline-block
- When fixed, it forms its own column... instead, I want it to overlay on top of the main content.
The html:
<div class="container-fluid">
<div class="row-fluid">
<div id="sidebar" class="span3 scrollDiv" style="display: none;">
<!--Sidebar content-->
</div>
<div id="content" class="span12">
<!--Main content-->
</div>
<a id="toggleSidebar" href="#" class="toggles"><i class="icon-chevron-right"></i></a>
</div>
</div>
The css:
#toggleSidebar {
/* float: left; */
/* display:inline-block; */
position:fixed;
display:block;
left:0;
top:45px;
color:#779DD7;
padding:2px 4px;
}
The javascript:
function sidebar(panels) {
if (panels === 1) {
$('#content').removeClass('span9');
$('#content').addClass('span12 no-sidebar');
$('#sidebar').hide();
} else if (panels === 2) {
$('#content').removeClass('span12 no-sidebar');
$('#content').addClass('span9');
$('#sidebar').show();
}
}
$('#toggleSidebar').click(function() {
if ($.asm.panels === 1) {
$('#toggleSidebar i').addClass('icon-chevron-left');
$('#toggleSidebar i').removeClass('icon-chevron-right');
return sidebar(2);
} else {
$('#toggleSidebar i').removeClass('icon-chevron-left');
$('#toggleSidebar i').addClass('icon-chevron-right');
return sidebar(1);
}
})
A demonstration of this can be viewed here: http://jsfiddle.net/amorris/dmyTR/
Despite extensive searching online, I could not find an example - however, I have provided a rough sketch of what I am aiming for:
It bears some resemblance to the effect showcased at - where they seem to use display: block; clear: both; and then position the pull tab absolutely within the div with a negative right position.