I just visited this page http://www.elmastudio.de/ and wondered if it is possible to build the left sidebar collapse with Bootstrap 3.
Code to collapse the sidebar from the top (phone only):
<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
<span class="sr-only">Sidebar</span>
<span class="glyphicon glyphicon-check"></span>
</button>
Sidebar itself has the hidden-xs class. It is removed with the following js
$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});
If you click the button it toggles the sidebar from the top. It be great to see the sidebar behave like the website above shows. Any help is appreciated!
This question is related to
twitter-bootstrap-3
bootstrap-4
sidebar
collapse
Its not mentioned on doc, but Left sidebar on Bootstrap 3 is possible using "Collapse" method.
As mentioned by bootstrap.js :
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
This mean, adding class "width" into target, will expand by width instead of height :
EDIT: I've added one more option for bootstrap sidebars.
There are actually three manners in which you can make a bootstrap 3 sidebar. I tried to keep the code as simple as possible.
Here you can see a demo of a simple fixed sidebar I've developed with the same height as the page
I've also developed a rather simple column sidebar that works in a two or three column page inside a container. It takes the length of the longest column. Here you can see a demo
If you google bootstrap dashboard, you can find multiple suitable dashboard, such as this one. However, most of them require a lot of coding. I've developed a dashboard that works without additional javascript (next to the bootstrap javascript). Here is a demo
For all three examples you off course have to include the jquery, bootstrap css, js and theme.css files.
If you want the sidebar to hide on pressing a button this is also possible with only a little javascript.Here is a demo
Via Angular: using ng-class
of Angular, we can hide and show the side bar.
http://jsfiddle.net/DVE4f/359/
<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
<div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
Sidebar
</div>
<div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'" id="colMain" >
<button ng-click='toggle()' >Sidebar Toggle</a>
</div>
</div>
</div>
.
function AppCtrl($scope) {
$scope.showgraphSidebar = false;
$scope.toggle = function() {
$scope.showgraphSidebar = !$scope.showgraphSidebar;
}
}
http://getbootstrap.com/examples/offcanvas/
This is the official example, may be better for some. It is under their Experiments examples section, but since it is official, it should be kept up to date with the current bootstrap release.
Looks like they have added an off canvas css file used in their example:
http://getbootstrap.com/examples/offcanvas/offcanvas.css
And some JS code:
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
Source: Stackoverflow.com