Responsive Multilevel Navigation Menu with Vanilla JavaScript

Category: Javascript , Menu & Navigation | July 5, 2018
Author: robinpoort
Views Total: 3,933
Official Page: Go to website
Last Update: July 5, 2018
License: MIT

Preview:

Responsive Multilevel Navigation Menu with Vanilla JavaScript

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.

wrapper: document.getElementsByTagName('nav')[0],
menu: '',
initiated_class: 'rm-initiated',
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',
focusedclass: 'rm-focused',
width: 600,
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'

Changelog:

07/05/2018

  • Multiple menus semi possible

You Might Be Interested In:


Leave a Reply