Simple Off-canvas Side Menu With Vanilla Javascript – Offcanvas Muscle

Preview:

Description:

A vanilla JavaScript and CSS3 based animated off-canvas menu that slides out from the left o right-hand side of your screen when toggled.

How to use it:

Create a left side off-canvas menu using Html list.

<ul class="offcanvas left" id="myLeftMenu">
  <li class="nav-item"><a href="#">Home</a> </li>
  <li class="nav-item"><a href="#">About</a> </li>
  <li class="nav-item"><a href="#">Contact</a> </li>
  <li class="nav-item"><a href="#">Services</a> </li>
  <li class="nav-item"><a href="#">Blog</a> </li>
</ul>

Add a toggle button to your main content area.

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

Style the toggle button.

.nav-button {
  position: absolute;
  top: 15px;
  width: 30px;
  height: 25px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}
.nav-button.left { left: 15px; }

The Core CSS/CSS3 styles for the off-canvas menu.

body,
html { height: 100%; }
body {
  overflow-x: hidden;
  margin: 0;
  height: 100%;
}
.offcanvas {
  list-style: none;
  width: 25%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.offcanvas.left { left: -100%; }
.offcanvas.left.open { left: 0; }
.site-wrap {
  min-width: 100%;
  min-height: 100%;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
}
.site-wrap.open.left { left: 25%; }
.site-wrap,
.offcanvas { transition: left 0.4s; }

Load the offcanvas-muscle.js script at the bottom of your document.

<script src="offcanvas-muscle.js"></script>

Execute offcanvasMuscle() function to start working.

offcanvasMuscle();

Changelog:

06/13/2020

• Bugfix