snap.js 모바일 사이드 슬라이드 메뉴

아래 사이트 클릭 하시면 사이드 슬라이드 메뉴를 

만들 수 있는 파일과 예제를 확인 할 수 있어요

https://github.com/jakiestfu/Snap.js#installation

Usage

var snapper = new Snap({

  element: document.getElementById('content')

});

Settings and Defaults

settings = {

    element: null,

    dragger: null,

    disable: 'none',

    addBodyClasses: true,

    hyperextensible: true,

    resistance: 0.5,

    flickThreshold: 50,

    transitionSpeed: 0.3,

    easing: 'ease',

    maxPosition: 266,

    minPosition: -266,

    tapToClose: true,

    touchToDrag: true,

    slideIntent: 40,

    minDragDistance: 5

}

element: The element which the user will be sliding side to side

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

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

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

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

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

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

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

easing: The CSS3 Easing method you want to use for transitions

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

minPosition: Maximum number of pixels the pane may be slid to the left

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

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

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

slideIntent: The number of degrees the user must initiate sliding in towards the left or right (see diagram below)