Menú lateral deslizante de varios niveles en Vanilla JavaScript-menú deslizante

Vista prévia

Descripción

Esta es la versión de JavaScript Vanilla de jQuery menú deslizante plugin que ayuda a los desarrolladores web a implementar un suave navegación deslizante, de varios niveles y fuera de lienzo en JavaScript Vanilla.

Funcionamiento

Instalar & descargar con NPM.

# NPM
$ npm install @grubersjoe/slide-menu --save

Importe el JavaScript y CSS del menú de diapositivas en el documento.

<link rel="stylesheet" href="styles/slide-menu.css">
<script src="scripts/slide-menu.js"></script>

Cree una lista de NAV anidada para la navegación multinivel.

<nav class="slide-menu" id="example">

<ul>


<li>



<a href="#">Home</a>


</li>


<li>



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



<ul>




<li><a href="#">HTML5</a></li>




<li><a href="#">CSS3</a></li>




<li><a href="#">JavaScript</a></li>



</ul>


</li>


<li>



<a href="#">Contact</a>


</li>


<li>



<a href="#">About</a>


</li>

</ul>
</nav>

Agregue controles personalizados a la página & menú deslizante.

<button type="button" class="slide-menu__control" data-action="open">Open</button>
<button type="button" class="slide-menu__control" data-action="back">Back</button>

<a class="slide-menu-control" data-action="close">Close</a>
<a class="slide-menu-control" data-target="this" data-action="close">Close</a>

Inicialice el menú deslizante y listo.

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

const myMenu = new SlideMenu(document.getElementById('example'));
});

Available configuration options to customize the slide menu.

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

const myMenu = new SlideMenu(document.getElementById('example'),{





// 'left' or 'right'




position: 'right'





// Add a back link to the slide menu




showBackLink: true,





// Keyboard event which will be used to open the slide menu




keycodeOpen: undefined,





// Keyboard event which will be used to close the slide menu




keycodeClose: undefined,





// HTML to prepend to links




submenuLinkBefore: '',





// HTML to append to links




 submenuLinkAfter: '',





// HTML to prepend to back link




 backLinkBefore: '',





// HTML to append to back link




backLinkAfter: ''






});
});

API methods.

// toggle the slide menu
myMenu.toggle()

// open the slide menu
myMenu.open()

// close the slide menu
myMenu.close()

// back to the previous level
myMenu.back()

// navigate to a specific menu
myMenu.navigateTo(target)

Registro de cambios

03/30/2019

• v1.2.0: Fix bug in onClick handlers and event dispatching

03/29/2019

• v1.1.8: Overflow auto for menu container

02/27/2019

• v1.1.4: strict type checking and code cleanup

02/10/2019

• v1.1.3: fix event dispatching