Author: | SkipsoLabs |
---|---|
Views Total: | 12,114 views |
Official Page: | Go to website |
Last Update: | February 8, 2019 |
License: | MIT |
Preview:

Description:
The Collapsible library automatically collapsible the nav items into a dropdown menu with a hamburger toggle button, when there’s not enough screen space.
Compatible with the latest Bootstrap 4 framework. Requires the ResizeSensor library for resize detection.
How to use it:
Create a navbar for your site.
<div id="navbar-first" class="navbar navbar-lg no-padding no-box-shadow sk-big-navbar navigation-bar"> <ul class="nav navbar-nav nav-tabs nav-tabs-bottom bottom-divided no-margin"> <li><a href="#">Home</a></li> <li><a href="#"Item 1</a></li> <li><a href="#"Item 2</a></li> <li><a href="#"Item 3</a></li> <li><a href="#"Item 4</a></li> <li><a href="#"Item 5</a></li> <li><a href="#"Item 6</a></li> <li><a href="#"Item 7</a></li> <li><a href="#"Item 8</a></li> <li><a href="#"Item 9</a></li> <li><a href="#"Item 10</a></li> ... </ul> </div>
Load the Collapsible.js library after ResizeSensor.js.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/ResizeSensor.min.js"></script> <script src="./dist/collapsible.js"></script>
Load the DOM4 library for IE support (OPTIONAL).
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"></script>
Initialize the collapsible library and specify the minimum available space (in pixels) in the container.
var collapsible = new Collapsible('.navbar-nav', 200); collapsible.render();
very nice
Seems nice.. doesn’t work. Simple mistakes in the path to logo and other assets in the demo. Unavailable css-files linked, which may or may not break the functionality..