Menu
I wish to create a collapsible sidebar that the user can toggle. After much playing, I have achieved it, but right now, it is very ugly. Here's the code:
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 collapse show" id="sidebar">
<h2>I'm a sidebar</h2>
</nav>
<main class="col-md-9">
<i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"></i>
<h2>I'm the main content</h2>
</main>
</div>
</div>
The issue with this is, the collapsing is vertical, and then once collapse, the content doesn't go full width!
901
To make a drop-down menu collapsible, data-toggle="collapse" should be added to the link holding the dropdown. Note that I also added class="dropdown-toggle" - this class adds a little triangle on the side and helps the user understand its function.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
To create the Bootstrap Collapse Mobile within small displays, just simply put in 2 classes in the <ul> : collapse and navbar-collapse . Through this, you will be able to cause the menu fade away on the smaller display screens.
This snippet is free and open source hence you can use it in your project.Bootstrap 4 Collapsible Toggle Sidebar with navbar snippet example is best for all kind of projects.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.
Its not mentioned on doc, but Left sidebar on Bootstrap 3 is possible using "Collapse" method. Collapse.prototype.dimension = function () { var hasWidth = this.$element.hasClass ('width') return hasWidth ? 'width' : 'height' }
This means that the initial height of the sidebar will be at least equal to the screen height. Also, its height will increase when the page content would increase. Just a little touch to the Bootstrap 4 drop-downs. We are using standard Bootstrap 4 class .dropdown-toggle. This class adds a small triangle next to the drop-down links.
We are using standard Bootstrap 4 class .dropdown-toggle. This class adds a small triangle next to the drop-down links. To unify the links' appearance, we will move the triangle, that usually sits next to the text, to the right part of the sidebar with the following CSS code.
There is an easy way, you do not need to use jQuery. Look at this example:
<div class="container-fluid">
<div class="row">
<nav class="col-md-3 collapse show" id="sidebar">
<h2>I'm a sidebar</h2>
</nav>
<main class="col-md-9">
<i class="fa fa-times" data-toggle="collapse" data-target="sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="document.getElementById(this.getAttribute('data-target')).style.display = 'none';"></i>
<h2>I'm the main content</h2>
</main>
</div>
</div>
I've changed data-target and added a very simple onclick.
EDIT:
Further improvements:
<div class="container-fluid">
<div class="row d-flex">
<nav class="col-md-3 collapse show width" id="sidebar">
<h2>I'm a sidebar</h2>
</nav>
<main class="col-md-9">
<i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="var that = this; setTimeout(function() {console.log(that.parentNode);that.parentNode.style.flex = 'auto';that.parentNode.style['max-width'] = 'none';}, 2000);"></i>
<h2>I'm the main content</h2>
</main>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
