Menú desplegable/acordeón de varios niveles en Vanilla JavaScript-metisMenu

Vista prévia

Descripción

Esta es la versión de JavaScript Vanilla del jQuery metisMenu plugin que le ayuda a crear Navegación interactiva, animada, accesible, de acordeón/desplegable en la aplicación Web.

Características

• Animaciones de colapso/expansión suaves.
• AJAX habilitado.
• Compatible con escritorio y móvil.
• Controladores de eventos.
• Animaciones personalizadas basadas en < a href = "https://daneden.github.io/animate.css/" target = "_ blank" rel = "noopener" > Animate. CSS .

¿Cómo funciona?

Instale el metisMenu con gestores de paquetes.

# Yarn
$ yarn add metisMenu

# NPM
$ npm install metisMenu --save

Incluya los archivos JavaScript y CSS de metisMenu en la página.

<link rel="stylesheet" href="/path/to/metismenujs.min.css">
<script src="/path/to/metismenujs.min.js"></script>

Cree una navegación multinivel a partir de listas HTML anidadas como se indica a continuación:

<ul class="metismenu" id="example">

<li>


<a class="has-arrow" href="#" aria-expanded="false">



<span class="fa fa-fw fa-github fa-lg"></span>



metisMenu


</a>


<ul class="collapse">



<li>




<a href="https://github.com/onokumus/metismenujs">





<span class="fa fa-fw fa-code-fork"></span> Fork




</a>



</li>



<li>




<a href="https://github.com/onokumus/metismenujs">





<span class="fa fa-fw fa-star"></span> Star




</a>



</li>



<li>




<a href="https://github.com/onokumus/metismenujs/issues">





<span class="fa fa-fw fa-exclamation-triangle"></span> Issues




</a>



</li>


</ul>

</li>

<li>


<a class="has-arrow" href="#" aria-expanded="false">Menu 0</a>


<ul class="collapse">



<li>




<a href="#">item 0.1</a>



</li>



<li>




<a href="#">item 0.2</a>



</li>



<li>




<a href="http://onokumus.com">onokumus</a>



</li>



<li>




<a href="#">item 0.4</a>



</li>


</ul>

</li>

<li id="removable">


<a class="has-arrow" href="#" aria-expanded="false">Menu 1</a>


<ul class="collapse">



<li>




<a href="#">item 1.1</a>



</li>



<li>




<a href="#">item 1.2</a>



</li>



<li>




<a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>




<ul class="collapse">





<li>






<a href="#">item 1.3.1</a>





</li>





<li>






<a href="#">item 1.3.2</a>





</li>





<li>






<a href="#">item 1.3.3</a>





</li>





<li>






<a href="#">item 1.3.4</a>





</li>




</ul>



</li>



<li>




<a href="#">item 1.4</a>



</li>



<li>




<a class="has-arrow" href="#" aria-expanded="false">Menu 1.5</a>




<ul class="collapse">





<li>






<a href="#">item 1.5.1</a>





</li>





<li>






<a href="#">item 1.5.2</a>





</li>





<li>






<a href="#">item 1.5.3</a>





</li>





<li>






<a href="#">item 1.5.4</a>





</li>




</ul>



</li>


</ul>

</li>

<li>


<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>


<ul class="collapse">



<li>




<a href="#">item 2.1</a>



</li>



<li>




<a href="#">item 2.2</a>



</li>



<li>




<a href="#">item 2.3</a>



</li>



<li>




<a href="#">item 2.4</a>



</li>


</ul>

</li>
</ul>

Inicializar la navegación con la configuración predeterminada.

document.addEventListener("DOMContentLoaded", function(event) {

new MetisMenu('#example');
});

Opciones disponibles para personalizar la navegación.

document.addEventListener("DOMContentLoaded", function(event) {

new MetisMenu('#example',{




// selector of parent trigger



parentTrigger: "li",




// selector of submenu



subMenu: "ul",




// enable auto collapse



toggle: true,




// trigger element



triggerElement: "a"





});
});

Controladores de eventos.

document.addEventListener("DOMContentLoaded", function(event) {

new MetisMenu('#example')


.on('show.metisMenu', function(event) {






console.log(event.detail.showElement);


})


.on('shown.metisMenu', function(event) {




console.log(event.detail.shownElement);


 })


.on('hide.metisMenu', function(event) {




console.log(event.detail.hideElement);


})


.on('hidden.metisMenu', function(event) {




console.log(event.detail.hiddenElement);




});
});

Registro de cambios

09/08/2018

• v1.0.2