Narcissistic Pickle Meister

    sideswipe

    0.3.1 • Public • Published

    SideSwipe

    A trendy JS side menu component.

    SideSwipe is a really simple side menu component written in vanilla JS.

    Requirments

    Installation

    npm install sideswipe
    

    Usage

    Require it:

    var Menu = require('sideswipe');
    

    Initialize it:

    window.onload = function(){
        new Menu();
    };
    

    Customize the menu:

    new Menu({
        overlay: true,
        overlayOpacity:.25,
        pan: true,
        side: 'left',
        menuHandleClass: 'sideswipe-handle',
        menuPanelClass: 'sideswipe-menu',
        pageClass: 'sideswipe-page',
        tween: TWEEN.Easing.Exponential.InOut
    });
    

    SideSwipe uses the wonderful tween.js package. The default easing is InOut, you can pass it anything listed here.

    SideSwipe requires the menuHandle, menuPanel and page classes to be defined.

    Here is some HTML to get you started:

    <header>
        <a class="sideswipe-handle" href="#">
            <span class="hamburger-icon"></span>
        </a>
    </header>
    
    <div id="content" class="sideswipe-page" role="main">
        ...
    </div>
    
    <nav class="sideswipe-menu">
        <ul>
            <li><a href="#">Item One</li>
            <li><a href="#">Item One</li>
        </ul>
    </nav>
    
    

    And some CSS for the sideswipe-menu:

    .sideswipe-menu{
        position: fixed;
        top: 0;
        left: -270px;
        bottom: 0;
        width: 270px;
        background-color: #efefef;
        z-index: 9999;
        overflow-y: auto;
    }
    

    Credits

    SideSwipe is maintained by Piccirilli Dorsey

    License

    MIT

    Install

    npm i sideswipe

    DownloadsWeekly Downloads

    5

    Version

    0.3.1

    License

    none

    Last publish

    Collaborators

    • adamthebig