Biblioteca de JavaScript para crear menús laterales de estilo de aplicación-Snap. js

Vista prévia

Descripción

Snap. js es una biblioteca JavaScript simple pero robusta para crear navegación lateral estilo aplicación móvil (menú de cajón) como se ve en Facebook y path.

Características

• Biblioteca independiente
• Alta personalización
• Flick support
• Detección de intención de usuario
• Deshabilite Hyperextension
• Event hooks
• CSS3 Powered animaciones con IE fallbacks
• Arrastre soporte
• Arrastre el soporte de manija
• API programática
• Elementos "no-Drag"
• Modo de aceleración definible
• Activar/desactivar eventos
• Lados discapacitados (izquierda o derecha)
• Soporta Ratchet < (con plantillas!)

¿Cómo funciona?

Descargue, descomprima y cargue el SNAP. CSS & Snap. js en su proyecto Web.

<link rel="stylesheet" href="snap.css">
<script src="snap.js"></script>

Cree un menú lateral como se muestra a continuación.

<div class="snap-drawers">

<div class="snap-drawer snap-drawer-left">


<div>



<ul>




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




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




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



</ul>


</div>

</div>

<div class="snap-drawer snap-drawer-right"></div>
</div>

Envuelva el contenido principal en un contenedor denominado ' Content '.

<div id="content" class="snap-content">

...
</div>

Inicialice el menú lateral con las opciones predeterminadas.

var snapper = new Snap({

element: document.getElementById('content')
});

Opciones disponibles.

// The element which the user will be sliding side to side
element: null,

// The element which the user will be using to slide the target element side to side
dragger: null,

// String, set to 'left' or 'right' to disable the respective side
disable: 'none',

// Add classes to the body to signify which side is being opened
addBodyClasses: true,

// If false, pane may not be slide past the minPosition and maxPosition
hyperextensible: true,

// The cooeficcient used to slow sliding when user has passed max or min threshold
resistance: 0.5,

// Number of pixels the user needs to swiftly travel to activate a "flick" open
flickThreshold: 50,

// The speed at which the pane slides open or closed
transitionSpeed: 0.3,

// The CSS3 Easing method you want to use for transitions
easing: 'ease',

// Maximum number of pixels the pane may be slid to the right
maxPosition: 266,

// Maximum number of pixels the pane may be slid to the left
minPosition: -266,

// If true, tapping an open pane will close it
tapToClose: true,

// If true, dragging the target settings.element will open/close the pane
touchToDrag: true,

// The number of degrees the user must initiate sliding in towards the left or right
slideIntent: 40,

// The minimum amount of pixels the user needs to drag within the slideIntent degrees to move the pane
minDragDistance: 5