Elegante navegación fuera de lienzo en Vanilla JavaScript-canvi. js

Vista prévia

Descripción

Canvi. js es un JavaScript independiente de vainilla que se utiliza para crear elegante, configurable, Push y/o superposición < a href = "https://wikicss.com/tag/off-canvas-menu/" > navegación off-Canvas para su aplicación web multiplataforma.

Install the Canvi.js via NPM:

$ npm install canvi --save

Funcionamiento

Inserte los archivos de canvi. js en su proyecto.

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

Crea el HTML para tu navegación fuera de lienzo.

<aside class="myCanvasNav canvi-navbar">

<div class="canvi-user-info">


<div class="canvi-user-info__image">



 <img src="logo.jpg">


</div>


<div class="canvi-user-info__data">




<span class="canvi-user-info__title">Title</span>




<a href="#" target="_blank" class="canvi-user-info__meta">View site</a>




<div class="canvi-user-info__close" onclick="t.close();"></div>


</div>

</div>


<ul class="canvi-navigation">



<li>





<a href="#" target="_blank" class="canvi-navigation__item">







<span class="canvi-navigation__icon-wrapper" style="background: #00adff;">









<span class="canvi-navigation__icon icon-iconmonstr-code-2"></span>







</span>







<span class="canvi-navigation__text">Laravel</span>





</a>



</li>




<li>





<a href="#" target="_blank" class="canvi-navigation__item">







<span class="canvi-navigation__icon-wrapper" style="background: #0082BF;">









<span class="canvi-navigation__icon icon-iconmonstr-code-5"></span>







</span>







<span class="canvi-navigation__text">CSS</span>





</a>



</li>




<li>





<a href="#" target="_blank" class="canvi-navigation__item">







<span class="canvi-navigation__icon-wrapper" style="background: #00567F;">









<span class="canvi-navigation__icon icon-iconmonstr-code-9"></span>







</span>







<span class="canvi-navigation__text">HTML</span>





</a>



</li>




<li>





<a href="#" target="_blank" class="canvi-navigation__item">







<span class="canvi-navigation__icon-wrapper" style="background: #002B40;">









<span class="canvi-navigation__icon icon-iconmonstr-code-11"></span>







</span>







<span class="canvi-navigation__text">JavaScript</span>





</a>



</li>




<li>





<a href="#" target="_blank" class="canvi-navigation__item">







<span class="canvi-navigation__icon-wrapper" style="background: #009CE5;">









<span class="canvi-navigation__icon icon-iconmonstr-code-13"></span>







</span>







<span class="canvi-navigation__text">Vue.js</span>





</a>



</li>

</ul>
</aside>

Inserte su contenido principal (p. ej., botón de palanca de navegación) en un contenedor con la clase CSS de ' canvi-Content '.

<main class="canvi-content">

<button class="canvi-open-button">Open The Navigation</button>
</main>

Inicializar la biblioteca canvi. js y listo.

var t = new Canvi()

Opciones de personalización disponibles.

var t = new Canvi({


content: '.canvi-content',


isDebug: false,


navbar: '.canvi-navbar',


speed: '0.3s',


openButton: '.canvi-open-button',


position: 'left', // or right


pushContent: true,


width: '300px'
})

API methods.

var t = new Canvi()

// close
t.close();

// open
t.open();

// toggle
t.toggle();

Registro de cambios

10/10/2018

• Reescribir