Bootstrap Off Canvas
Just a simple implementation of off canvas on Bootstrap.
Basic Usage
Import these lines on your source code.
<link rel="stylesheet" href="css/bootstrap-off-canvas.css">
<script src="js/bootstrap-off-canvas.js"></script>
Then wrap your usual Bootstrap code in these lines of HTML codes.
<div class="off-canvas-wrapper">
<div id="offcanvasid" class="off-canvas">
<div class="off-canvas-nav">
<div class="nav nav-pills nav-fill flex-column">
<a href="#" class="text-left nav-item nav-link active">Link 1</a>
<a href="#" class="text-left nav-item nav-link">Link 2</a>
<a href="#" class="text-left nav-item nav-link disabled">Disabled Link</a>
</div>
<div class="off-canvas-content" data-target="#offcanvasid">
<a href="#" class="off-canvas-toggler" type="button" data-target="#offcanvasid" aria-controls="offcanvasSupportedContent" aria-expanded="false" aria-label="Toggle off canvas menu">Toggle off canvas</a>
<!-- Your usual Bootstrap code goes here -->
<div class="container">
...
</div>
</div>
</div>
</div>
</div>
Options
In `off-canvas-nav` class, you may use the Bootstrap's Colors utility:
In `off-canvas-content` class, you may add `overlay` class to add overlay mask on the content part of your source code.
The repository
Please click the link below to go to my Github repository
takaneichinose
/
bootstrap-off-canvas
Just a simple implementation of off canvas on Bootstrap.
Bootstrap Off Canvas
Just a simple implementation of off canvas on Bootstrap.
Basic Usage
Import these lines on your source code.
<link rel="stylesheet" href="css/bootstrap-off-canvas.css">
<script src="js/bootstrap-off-canvas.js"></script>
Then wrap your usual Bootstrap code in these lines of HTML codes.
<div class="off-canvas-wrapper">
<div id="offcanvasid" class="off-canvas">
<div class="off-canvas-nav">
<div class="nav nav-pills nav-fill flex-column">
<a href="#" class="text-left nav-item nav-link active">Link 1</a>
<a href="#" class="text-left nav-item nav-link">Link 2</a>
<a href="#" class="text-left nav-item nav-link disabled">Disabled Link</a>
</div>
<div…Conclusion
In someone want to use this, you may use this as you please. I think, there is still a big room for improvements, so if anyone of you found a bug, or have a suggestion for feature improvement, please comment down below.
Demo
Top comments (0)