Open machristie opened 4 years ago
By default, Bootstrap only does vertical collapsing, but horizontal collapsing can be added with some CSS:
.collapse.show {
visibility: visible;
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width, visibility;
transition-property: width, visibility;
width: 0;
height: auto;
}
Source: https://www.codeply.com/go/UiteY92ke8/bootstrap-4-horizontal-collapse
To create the sidebar, create a div and inside it add a list group of menu items:
<div id="sidebar" class="collapse width">
<div class="list-group">
<a class="list-group-item">Menu Item #1</a>
<a class="list-group-item">Menu Item #2</a>
<a class="list-group-item">Menu Item #3</a>
…
</div>
</div>
Then add a collapse toggle, anywhere else on the page:
<a href="#" data-target="#sidebar" data-toggle="collapse">Toggle Sidebar</a>
Resources:
Bootstrap's collapse plugin and list group component can be used to construct the left side menu panel.