Menú JavaScript (similar aplicación móvil de Facebook)

por .

Snap.js es una pequeña biblioteca escrita en JavaScript para la construcción de un menú muy similar al que utiliza Facebook en su versión móvil.

Este recurso cuenta con la ventaja de ser una solución que no requiere del uso de bibliotecas externas, es fácil de personalizar y utiliza CSS3 para realizar las distintas animaciones.

Cuenta con total soporte para navegadores móviles, soporta una interface del tipo “Drag” y permite lanzar eventos según el estado del menú, algo que es especialmente útil a la hora de vincular nuestra aplicación con el comportamiento del componente.

menu javascript estilo aplicacion facebook

Ejemplo de uso:

Configuración básica:

var snapper = new Snap({
  element: document.getElementById('content')
});

Opciones de configuración

A continuación todas las posibilidades con las que cuenta el proyecto a la hora de personalizar el menú.

settings = {
    element: null,
    disable: 'none',
    addBodyClasses: true,
    resistance: 0.5,
    flickThreshold: 50,
    transitionSpeed: 0.3,
    easing: 'ease',
    maxPosition: 266,
    minPosition: -266,
    tapToClose: true,
    slideIntent: 40,
    minDragDistance: 5
}

Finalmente decir que este recurso esta pensado principalmente para navegadores móviles y si bien funciona bien en navegadores de escritorio, los mayores beneficios se reportan en sus respectivas versiones móviles.

Snap.js se encuentra liberado bajo licencia MIT. No hay mucho más que decir, un proyecto interesante y muy fácil de utilizar 😀

Web: Snap.js

Categorizado en: