Author: | magnusmartin85 |
---|---|
Views Total: | 546 views |
Official Page: | Go to website |
Last Update: | March 4, 2023 |
License: | MIT |
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 <span class="link-arrow">›</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 <span class="link-arrow">›</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.