Navegación de cajón deslizante en JavaScript puro-Drawerr. js

Vista prévia

Descripción

Drawerr. js es una biblioteca de JavaScript que convierte una lista HTML anidada en una navegación de cajón de varios niveles, amigable para móviles y fuera de lienzo para la página web multiplataforma.

Funcionamiento

Cree la navegación de cajón a partir de listas HTML anidadas:

<nav id="drawer" class="drawerr--init">

<ul>


<li> <span class="section-title active">Home</span>



<ul>




<li> <a class="active" href="#">Category 1</a>





<ul>






<li><a class="active" href="#">Category 1.1</a></li>






<li><a href="#">Category 1.2</a></li>





</ul>




</li>




<li><a href="#">Category 2</a></li>



</ul>


</li>


<li> <a href="#">Category 3</a> </li>


<li> <a href="#">Category 4</a>



<ul>




<li><a href="#">Category 4.1</a></li>




<li><a href="#">Category 4.2</a></li>




<li><a href="#">Category 4.3</a></li>




<li><a href="#">Category 4.4</a></li>



</ul>


</li>


<li> <span class="section-title">Category 5</span>



<ul>




<li><a href="#">Category 5.1</a></li>




<li><a href="#">Category 5.2</a>





<ul>






<li> <a href="#">Category 5.2.1</a> </li>






<li> <a href="#">Category 5.2.2</a>







<ul>








<li><a href="#">Category 5.2.2.1</a></li>








<li> <a href="#">Category 5.2.2.2</a>









<ul>










<li><a href="#">Category 5.2.2.2.1</a></li>










<li><a href="#">Category 5.2.2.2.2</a></li>









</ul>








</li>







</ul>






</li>





</ul>




</li>



</ul>


</li>


<li> <a href="#">Category 5.3</a> </li>

</ul>
</nav>

Cree un botón para alternar la navegación del cajón.

<button class="toggleDrawer">

<span></span>

<span></span>

<span></span>
</button>

Descargue e incluya los archivos Drawerr en la página HTML.

<link rel="stylesheet" href="dist/drawerr.css">
<script src="dist/drawerr.js"></script>

Active la navegación del cajón.

const args = {

drawerr: '#drawer',

toggleBtn: '.toggleDrawer',

navbar: 'header'
};

new drawerr().init(options);

Todas las opciones posibles.

{


// button text

btnText: "MENU",


// drawer selector

drawerr: "#drawerr",


// navbar selection

navbar: "header",


// toggle btn selector

toggleBtn: ".toggleDrawerr",


// or right

slideFrom: "left",


// true of fasle

preventBodyOnClick: false

}

Realice una acción en el menú abierto.

document.addEventListener('drawerr-open', function(){

// do something
});

Registro de cambios

09/27/2018

• Añadir la opción preventBodyOnClick

08/18/2018

• v2.0