Vanilla JavaScript Drawer Navigation

Preview:

Description:

This is a vanilla JavaScript implementation of the off-canvas sliding drawer for your site navigation.

How to use it:

Load the following JS and CSS files to your webpage.

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

Create the drawer navigation:

<div id="drawer_menu">
  <ul id="drawer_menu_inner">
    <li><a href="javascript: void(0);">Menu Item</a></li>
    <li><a href="javascript: void(0);">Menu Item</a></li>
    <li><a href="javascript: void(0);">Menu Item</a></li>
    ...
  </ul>
</div>

Create a button to toggle the drawer navigation.

<div id="drawer_btn">
  <a href="javascript: void(0);" onclick="vanilla_drawer.drawer_menu_open();"></a>
</div>

Create another button to close the drawer navigation.

<div id="drawer_wall" onclick="vanilla_drawer.drawer_menu_close();"></div>

Wrap the main content to the “drawer_content” container.

<div id="drawer_content">
  Main content here
</div>