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

Category: Javascript , Menu & Navigation | May 6, 2019
Author: grubersjoe
Views Total: 1,727
Official Page: Go to website
Last Update: May 6, 2019
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply