OFF-Canvas Push menu con JavaScript y CSS3 TRANSFORMS-fuera de juego

Vista prévia

Descripción

offside es una librería JavaScript que utiliza las transformaciones CSS3 para deslizarse en un menú fuera del lienzo mientras empuja la Página principal al otro lado.

Ideal para crear un sistema de navegación de estilo app para tu escritorio & sitio web para móviles.

Funcionamiento

Importa el offside. CSS en la sección head.

<link rel="stylesheet" href="path/to/offside.css">

Crear un menú fuera de lienzo de una lista no ordenada HTML que sigue la estructura HTML como esta:

<nav id="menu-demo" class="offside">

<ul>



<li><a href="#">Menu Item 1</a></li>



<li><a href="#">Menu Item 2</a></li>



<li><a href="#">Menu Item 3</a></li>



...

</ul>
</nav>

Crea un enlace dentro de tu contenido principal para alternar el menú fuera del lienzo.

<div id="container">


<h1>Page Title</h1>


<p>...</p>


<!-- Menu Toggle Button -->

<div class="menu-btn offside-button">Menu</div>


<p>...</p>


</div>

Importe el offside. js en la parte inferior de la página web para mejorar la velocidad de carga de la página.

<script src="path/to/offside.js"></script>

Inicialice el menú Push fuera del lienzo con opciones.

var offsideMenu1 = offside( '#menu-demo', {



// Sliding elements selectors


slidingElementsSelector:'#container',



// toggle button selector


buttonsSelector: '.menu-btn',



// left or right


slidingSide: 'left',


 // Disable CSS 3d Transforms support (for testing purposes)

 disableCss3dTransforms: false



});

Funciones de devolución de llamada disponibles.

// Function: After init callback
init: function(){},

// Function: Before open callback
beforeOpen: function(){},

// Function: After open callback
afterOpen: function(){},


// Function: Before close callback












beforeClose: function(){},

// Function: After close callback
 afterClose: function(){}

API methods.

// toggle
offsideMenu1.toggle();

// oepn
offsideMenu1.open();

// close
offsideMenu1.close();

// close all
offsideMenu1.closeAll();

// destroy
offsideMenu1.destroy();

v1.4.0 (07/20/2018)

• Inyectar fábrica fuera de juego no depender de objeto de ventana global