Simple OFF-Canvas menú lateral con vanilla JavaScript-Offcanvas Muscle

Vista prévia

Descripción

Un menú de canvas animado basado en JavaScript y CSS3 que se desliza desde la parte izquierda o derecha de la pantalla al alternar.

Funcionamiento

Crea un menú del lado izquierdo fuera del lienzo usando la lista HTML.

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

Añade un botón de alternancia a tu área de contenido principal.

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

Estilo del botón de alternancia.

.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; }

Los estilos Core CSS/CSS3 para el menú fuera del lienzo.

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

Cargue el script offcanvas-Muscle. js en la parte inferior del documento.

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

Ejecute la función offcanvasMuscle () para empezar a trabajar.

offcanvasMuscle();