Have ideas to improve npm?Join in the discussion! »

    swibe

    2.1.0 • Public • Published

    Swibe

    A simple slide menu in JS

    Getting started

    1. Install the npm package:

      npm install swibe
    2. Add the basic markup

      <button id="swibe-menu-trigger">Menu</button>
       
      <nav id="swibe-menu">
        <ul>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
        </ul>
      </nav>
    3. Import Swibe in your code, create a new instance and initialize it.

      import Swibe from 'swibe';
       
      const menu = new Swibe({});
       
      menu.init();

    You can instead load it into the HTML.

    <!-- Downloaded file -->
    <script src="swibe.min.js"></script>
     
    <!-- With UNPKG -->
    <script src="https://unpkg.com/swibe"></script>

    You can see a basic working demo in /docs/index.html

    API

    • init(): Initialize your Swibe instance
    • open(): Open the menu
    • close(): Close the menu
    • toggle(): Toggle the menu

    Options

    import Swibe from 'swibe';
     
    const menu = new Swibe({
      transition: '200ms',
      breakpoint: '960px',
      enableCallback: moveMainNav,
      disableCallback: restoreMainNav
    });
     
    menu.init();
    • menuID: 'swibe-menu' | The menu ID
    • triggerID: 'swibe-menu-trigger' | The trigger ID
    • width: '300px' | The menu width
    • transition: '300ms' | Transition time to open and close the menu
    • shadowOpacity: 0.5 | Shadow background opacity
    • zIndex: 999 | Menu z-index property.
    • breakpoint: undefined | The breakpoint where menu enable or disable. (Else, is enabled everytime)
    • disableCallback: undefined | Function that run every time that menu is disabled. (Only works if you use a breakpoint)
    • enableCallback: undefined | Function that run every time that menu is enabled. (If don't use a breakpoint, only works one time at init)
    • openCallback: undefined | Function that run every time that menu is opened
    • closeCallback: undefined | Function that run every time that menu is closed

    Changelog

    See Releases.

    Credits

    Developed by Iván Barcia

    Project tested on BrowserStack

    License

    This project is under MIT License

    Install

    npm i swibe

    DownloadsWeekly Downloads

    59

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    25.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar