Responsive Multilevel Navigation Menu with Vanilla JavaScript

Preview:

Description:

A simple vanilla JavaScript responsive multilevel menu that performs as a dropdown reveal menu on smaller screen devices. Built using CSS, Vanilla JavaScript and apollo.js JS library.

How to use it:

Load the responsivemenu.css in the header.

<link rel="stylesheet" href="path/to/responsivemenu.css">

Create a multilevel menu using nested Html lists.

<div class="navigation_container">
  <ul class="navigation rm-closed">
    <li class="active"> <a class="test" href="#">Home</a> </li>
    <li> <a href="test">Item 2</a> </li>
    <li> <a href="test">Item 3</a>
      <ul>
        <li> <a href="test">Test</a> </li>
        <li> <a href="test">A long one</a>
          <ul>
            <li> <a href="test">Test1</a> </li>
            <li> <a href="test">Test2</a>
              <ul>
                <li> <a href="test">Test1</a> </li>
                <li> <a href="test">Test2</a> </li>
                <li> <a href="test">Test3</a>
                  <ul>
                    <li> <a href="test">Test1</a> </li>
                    <li> <a href="test">Test2</a> </li>
                    <li> <a href="test">Test3</a> </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li> <a href="test">Test3</a> </li>
          </ul>
        </li>
        <li> <a href="test">Test</a> </li>
      </ul>
    </li>
    <li> <a href="#">Item 4</a> </li>
  </ul>
</div>

Load the apollo.js and vanilla.js.responsive.menu.js at the bottom of the webpage.

<script src="path/to/dependencies/apollo.js"></script>
<script src="path/to/vanilla.js.responsive.menu.js"></script>

Initialize the responsive menu.

responsivemenu.init({
  wrapper: document.querySelector('.navigation_container'),
  togglecontent: 'menu',
  sticky: 1
});

Full default options.

menu: '',
initiated_class: 'rm-initiated',
loaded_class: 'rm-loaded',
before_element: '',
toggletype: 'button',
toggleclass: 'rm-togglebutton',
toggleclosedclass: 'rm-togglebutton--closed',
togglecontent: 'menu',
subtoggletype: 'button',
subtoggleclass: 'rm-subtoggle',
subtogglecontent: '+',
sticky: 0,
absolute: 0,
hideclass: 'rm-closed',
openclass: 'rm-opened',
openbodyclass: 'has-opened-menu',
focusedclass: 'rm-focused',
animateopenclass: 'is-opening',
animatecloseclass: 'is-closing',
animateduration: 0, // (Animated with CSS so set to same duration as CSS value)
subanimateopenclass: 'is-opening',
subanimatecloseclass: 'is-closing',
subanimateduration: 0, // (Animated with CSS so set to same duration as CSS value)
parentclass: 'rm-parent',
fullmenuclass: 'rm-fullmenu',
absolutemenuclass: 'rm-absolutemenu',
bodyoverflowhiddenclass: 'rm-bodyoverflowhidden',
menuoverflowautoclass: 'rm-menuoverflowauto',
stickyclass: 'rm-sticky',
stickyinitiatedclass: 'rm-sticky-initiated',
noresponsivemenuclass: 'rm-no-responsive-menu',
mobileindicatorid: 'rm-mobile-indicator',
mobilesubmenuindicatorid: 'rm-mobile-submenu-indicator',

Event handlers.

onAfterInit: function() {},
onAfterLoad: function() {},
onBeforeToggleOpen: function() {},
onAfterToggleOpen: function() {},
onBeforeToggleClose: function() {},
onAfterToggleClose: function() {},
onBeforeSubToggleOpen: function() {},
onAfterSubToggleOpen: function() {},
onBeforeSubToggleClose: function() {},
onAfterSubToggleClose: function() {}

Changelog:

v1.2.0 (07/27/2019)

• Add load event and add class

v1.1.1 (07/06/2019)

• Fixing the use of settings.menu setting.
• Fixing the broken settings.before_element setting.

07/05/2018

• Multiple menus semi possible