Offcanvas Muscle

A responsive menu with vanilla Javascript and CSS transitions. Looking for a simple and clean solution to create offcanvas left and right menus, we decide to create this little framework, feel free to expand and collaborate. It just works!

See the Demo

Usage

Files

Include in your code the following files:

<link rel="stylesheet" href="path/to/offcanvas-muscle.css">
<script src="path/to/offcanvas-muscle.js"></script>

HTML

The following are the mandatory HTML code that Offcanvas Muscle needs to work

<ul class="offcanvas left" id="offcanvas-left-menu">
  ...
</ul>

<div class="offcanvas-site-wrap">
  <!-- Left Menu Button -->
  <a id="trigger-left-menu" class="nav-button left" offcanvas-menu="offcanvas-left-menu"></a>
  
  <!-- insert the rest of your page markup here -->
</div>

Javascript

Later add this function when your DOM is ready:

/**
 * Create a new object OffcanvasMuscle for each menu
 */
var offcanvasMenu = new OffcanvasMuscle({
  menu: "offcanvas-left-menu",
  button: "trigger-left-menu"
});

Gratitude