Multi-level Sliding Side Menu In Vanilla JavaScript – Slide Menu

Preview:

Description:

This is the vanilla JavaScript version of the jQuery slide menu plugin that helps web developers implement a smoothly sliding, multi-level, off-canvas navigation in vanilla JavaScript.

How to use it:

Install & Download with NPM.

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

Import the Slide Menu’s JavaScript and CSS into the document.

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

Create a nested nav list for the multi-level navigation.

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

Add custom controls to the page & slide menu.

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

Initialize the slide menu and done.

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)

Changelog:

05/06/2019

• v1.2.1: Bug fixes and maintenance

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