Simple Multi-level Offcanvas Menu In Vanilla JavaScript

Preview:

Description:

A simple, mobile-first, multi-level off-canvas menu written in vanilla JavaScript.

How to use it:

1. Create a nested nav list for the off-canvas menu.

<div class="off-canvas">
  <div class="off-canvas-header">
    <h4 class="off-canvas-title">
      Off-Canvas-Menu
    </h4>
    <div data-bs-dismiss="off-canvas" aria-label="Close">
      <div class="icon-close"></div>
    </div>
  </div>
  <div class="off-canvas-body">
    <nav>
      <ul class="list-level-0">
        <li class="list-item">
          <a class="link-level-1" href="#">
            Home
          </a>
        </li>
        <li class="list-item">
          <a class="link-level-1" href="#">
            Services&nbsp;<span class="link-arrow">&#8250;</span>
          </a>
          <ul class="list-level-1">
            <li class="list-item">
              <a class="link-level-2" href="#">
                UX-Design
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Webdesign
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Content Marketing
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item">
          <a class="link-level-1" href="#">
            Team&nbsp;<span class="link-arrow">&#8250;</span>
          </a>
          <ul class="list-level-1">
            <li class="list-item">
              <a class="link-level-2" href="#">
                John
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Peter
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                Gordon
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>

2. Load the main stylesheet off-canvas-menu.css.

<link rel="stylesheet" href="css/off-canvas-menu.css" />

3. Create a hamburger button to toggle the off-canvas menu.

<aside class="icon-open-row">
  <div class="icon-open-container">
    <div class="icon-open-col-1">
      ☰
    </div>
    <div class="icon-open-col-2">
      Open Menu
    </div>
  </div>
</aside>

Changelog:

03/04/2023

• Update

04/24/2022

• bugfixes

11/02/2021

• add letter spacing to menu links.