skipsolabs / collapsible

Collapse navbar items dynamically, when there isn't enough space on the screen

Collapse navbar items dynamically, when there isn't enough space on the screen.

---

⚠️ This project is unmaintained ⚠️

Installation

It requires DOM4 to work on IE >= 10

It requires ResizeSensor to work correctly.

Using pre-generated asset

Copy the collapsible.js file, available in the dist folder, and include it in your HTML page.

Manually

You must have Node and npm installed on your system.

Clone this repository:

git clone https://github.com/domcorvasce/collapsible

Then, go into the folder and install the development dependencies:

cd collapsible
yarn

You're ready to build the asset:

yarn build

Usage

<!-- .... -->
<div class="navbar navbar-lg no-padding no-box-shadow navigation-bar">
    <ul class="nav navbar-nav nav-tabs nav-tabs-bottom bottom-divided no-margin">
        <li><a href="#startups">All Startups</a></li>
        <li><a href="#combinators">Combinators</a></li>
        <li><a href="#usa">USA</a></li>
        <li><a href="#europe">Europe</a></li>
        <li><a href="#asia">Asia</a></li>
        <li><a href="#challenges">Challenges</a></li>
        <li><a href="#designcontests">Design Contests</a></li>
        <li><a href="#devws">Dev Workshops</a></li>
        <li><a href="#businessws">Business Workshops</a></li>
        <li><a href="#marketingsessions">Marketing Sessions</a></li>
        <li><a href="#credits">Credits</a></li>
    </ul>
</div>
<!-- .... -->

const collapsible = new Collapsible('.navbar-nav', 200);
collapsible.render();

Constructor

• selector: represents the container of the items to collapse
• threshold: the minimum amount of available space before the collapse event is triggered

Methods

• render: inject the collapsed menu and start looking for items to collapse

License

Released under MIT license.

collapsible's Issues

The ability to customize the HTML

Hi! Thanks for the great decision!
Q: are you considering adding the ability to change the HTML paste layout.
For example, I don't use bootstrap in a project, and would like to add an inscription instead of a sandwich. I'd like to change the hamburger to text.

Add option to disable threshold

Add support to IE9/IE10

• classList polyfill
• ...

Can't get it to work.. skipsolabs -css files not available..

I can't get it to work.. after fixing to minor errors in the demo-index.html, I am getting the menu twice, with the burger logo inbetween and 2x 404 errors to bootstrap and core.css..