Press "Enter" to skip to content

Simple Multi-Level Sidebar Offcanvas Menu In Vanilla JavaScript

Off-Canvas Menu is a simple, mobile-first, multi-level off-canvas menu written in vanilla JavaScript.

multi level slide out menu, off canvas menu multi level, multi level hamburger menu, multi level sidebar menu bs, multi level mobile menu, responsive off canvas menu

How to make use of it:

1. Create a nested navigation menu for a menu outside the panel.

<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 style sheet out of the menu.

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

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

<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>

Simple Multi-level Offcanvas Menu, Off Canvas Menu Plugin/Github, off canvas navigation examples


See Demo And Download

Official Website(magnusmartin85): Click Here

This superior jQuery/javascript plugin is developed by magnusmartin85. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.