Sliding Drawer Navigation In Pure JavaScript – Drawerr.js

Drawerr.js is a JavaScript library that converts a nested html list into a mobile-friendly, off-canvas, multi-level drawer navigation for your cross-platform webpage.

How to use it:

Create the drawer navigation from nested html lists:

<nav id="drawer" class="drawerr--init">
  <ul>
    <li> <span class="section-title active">Home</span>
      <ul>
        <li> <a class="active" href="#">Category 1</a>
          <ul>
            <li><a class="active" href="#">Category 1.1</a></li>
            <li><a href="#">Category 1.2</a></li>
          </ul>
        </li>
        <li><a href="#">Category 2</a></li>
      </ul>
    </li>
    <li> <a href="#">Category 3</a> </li>
    <li> <a href="#">Category 4</a>
      <ul>
        <li><a href="#">Category 4.1</a></li>
        <li><a href="#">Category 4.2</a></li>
        <li><a href="#">Category 4.3</a></li>
        <li><a href="#">Category 4.4</a></li>
      </ul>
    </li>
    <li> <span class="section-title">Category 5</span>
      <ul>
        <li><a href="#">Category 5.1</a></li>
        <li><a href="#">Category 5.2</a>
          <ul>
            <li> <a href="#">Category 5.2.1</a> </li>
            <li> <a href="#">Category 5.2.2</a>
              <ul>
                <li><a href="#">Category 5.2.2.1</a></li>
                <li> <a href="#">Category 5.2.2.2</a>
                  <ul>
                    <li><a href="#">Category 5.2.2.2.1</a></li>
                    <li><a href="#">Category 5.2.2.2.2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">Category 5.3</a> </li>
  </ul>
</nav>

Create a button to toggle the drawer navigation.

<button class="toggleDrawer">
  <span></span>
  <span></span>
  <span></span>
</button>

Download and include the Drawerr files on the html page.

<link rel="stylesheet" href="dist/drawerr.css">
<script src="dist/drawerr.js"></script>

Activate the drawer navigation.

const args = {
  drawerr: '#drawer',
  toggleBtn: '.toggleDrawer',
  navbar: 'header'
};
new drawerr().init(options);

All possible options.

{
  // button text
  btnText: "MENU",
  // drawer selector
  drawerr: "#drawerr",
  // navbar selection
  navbar: "header",
  // toggle btn selector
  toggleBtn: ".toggleDrawerr",
  // or right
  slideFrom: "left",
  // true of fasle
  preventBodyOnClick: false
}

Perform an action on menu open.

document.addEventListener('drawerr-open', function(){
  // do something
});

Changelog:

09/04/2019

• 3.0.0-beta.8

09/27/2018

• add option preventBodyOnClick

08/18/2018

• v2.0