I am looking for a CSS solution to create a button to toggle a sidebar on and off using twitter bootstrap.
I'd like one of those little icons people have on their webpage that looks like a pull tab when the sidebar is closed, and then follows the sidebar out when it is pulled - does this have a name?
I've created a toggleSidebar icon link to do this, but I have two problems:
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 working example of this: http://jsfiddle.net/amorris/dmyTR/
For the life in me, I can't find an example on the web - but here's a quick drawing of what I'm after:
It's a bit like the effect @ http://simplerealtytheme.com/plugins/pullout-widgets/ - which looks like they're using a display: block; clear: both; and then positioning the pull tab absolutely within the div with a negative right position.
I think this is what you want, see here .
Relevant code is this:
#content {
float:left;
}
#mapCanvas img {
max-width: none;
}
#maincont{
margin-top: 42px;
}
#toggleSidebar {
float:left;
color:#779DD7;
padding:2px 4px;
}
#sidebar{
float:left;
}
Please confirm that that was what you have in mind!
Is this what you had in mind?
Basically, instead of .hide() and .show(); you animate its position.
// to hide
$('#sidebar').animate({
left: -180,
});
// to show
$('#sidebar').animate({
left: 20,
});
I removed #sidebar from .container-fluid, because, well, it's not part of the container. I also put #toggleSidebar inside #sidebar.
Here's an animated side drawer I drew up requiring very little bootstrap modification: http://zombiehippie.github.io/Side-drawer/
@media screen and (max-width: 768px) {
/* this is container is moved to the side if class is added*/
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
/* toggled when navbar is out */
.side-collapse-container.out{
left:200px;
}
.side-collapse {
/* need top to keep from overlapping fixed header*/
top:50px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
/* transition animates the element */
transition:width .4s;
}
/* toggled when navbar is in */
.side-collapse.in {
width:0;
}
}
A fixed navbar using the styles of .side-collapse
allows us to fix the bar to the edge of our screen.
Adding .side-collapse-container
to the the container after the header allows that content to be shifted over on open.
Some script appends a click event to the [data-toggle=]
selector.
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
Look at the github page for the source html or jade.
HTML source https://github.com/ZombieHippie/Side-drawer/tree/gh-pages
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.