Navbar plegable adaptable en Vanilla JavaScript-contraíble

Vista prévia

Descripción

La biblioteca plegable automáticamente contraíble los elementos de navegación en un menú desplegable con un botón de alternancia de hamburguesa, cuando no hay suficiente espacio en la pantalla.

Compatible con el último Framework bootstrap 4. Requiere el ResizeSensor biblioteca para la detección de cambio de tamaño.

Funcionamiento

Cree una barra de navegación para su sitio.

<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>

Cargue la biblioteca collapsible. js después de ResizeSensor. js.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ResizeSensor.min.js"></script>
<script src="./dist/collapsible.js"></script>

Cargue el DOM4 biblioteca para el soporte de IE (opcional).

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"></script>

Inicialice la biblioteca contraíble y especifique el espacio mínimo disponible (en píxeles) en el contenedor.

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