Cyberswipe.js

A Microlibrary for Swipeable Navigation

Cyberswipe iPad mini screenshot

About
Cyberswipe.js brings easy, swipeable navigation to web browsers on devices 7″ and up. Targeted at touch screens, Cyberswipe gives you primary and secondary drawer elements to organize your navigation.

Features
JavaScript Object-Oriented library with prototypal inheritance for effective memory management.
Feature detection for touchscreen devices.
Public API methods.
Released under the MIT License.

Github
https://github.com/brendajin/cyberswipe.js

Live Demo, Docs, and API helper
http://brendajin.github.io/cyberswipe.js

Quickstart:


    var mySwiper = new Cyberswipe({
        drawerWidth: 250, // All units are in px
        handleWidth: 60,
        threshold: 50, // The threshold at which the drawer will snap open or shut
        dragElement: document.getElementById('cyber-drag-handle'),
        pushContent: false, // If set to true, content will be pushed over when nav drawer opens
        nav: document.getElementsByTagName('nav')[0],
        navContent: document.getElementsByClassName('cyber-drawer')[0],
        contentContainer: document.getElementsByClassName('cyber-content-container')[0],
        contentElement: document.getElementsByClassName('cyber-content')[0],
        contentMargin: 10
    });
                

Public Methods


    mySwiper.open(); 
    mySwiper.close();
    mySwiper.isOpen();
                

Download

cyberswipe.js

index.html starter file with comments

Comments Off

Filed under Uncategorized