DOCSEARCHbyAlgolia
Submit Docs

Slideout.js

repository·master·Indexed 27 days ago

https://github.com/mango/slideout

A lightweight (2Kb), dependency-free touch slideout navigation menu for mobile web applications. Version 1.0.1 provides a programmable interface to open, close, and toggle a menu panel with configurable options for duration, easing, and touch tolerance. It includes an event emitter for lifecycle events like 'open' and 'close', and supports the 'data-slideout-ignore' attribute to disable dragging on specific elements.

Tokens
1.4K
Snippets
3
Records
13
Agent score
43%

What's inside slideout

  1. Install Slideout.js

    master

    You can install Slideout.js via CDN or various package managers.

    CDN:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>

    Package Managers:

    npm install slideout
spm install slideout
bower install slideout.js
component install mango/slideout
    npm install slideout

  2. Implement Slideout.js Markup and Styles

    master

    To use Slideout.js, you must provide specific HTML markup and CSS.

    Required Markup: You need a menu element (#menu) and a main content element (#panel).

    <nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>

    Required CSS: Slideout requires specific CSS classes (.slideout-menu, .slideout-panel) to handle positioning and transitions. Ensure your body has width: 100%; height: 100%; and that .slideout-panel has a background-color defined.

    <nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>

  3. Handle Slideout events

    master

    Slideout provides an event emitter interface using .on(event, listener), .once(event, listener), and .off(event, listener).

    Available Events:

    • beforeclose: Emitted before the menu starts closing.
    • close: Emitted when the menu is closed.
    • beforeopen: Emitted before the menu starts opening.
    • open: Emitted when the menu is open.
    • translatestart: Emitted when a touch-driven translation starts.
    • translate: Emitted during translation. The listener receives the translated distance in pixels.
    • translateend: Emitted when a touch-driven translation ends.

  4. Control the Slideout menu

    master

    Use the following methods on your Slideout instance to control the menu state:

    • slideout.open(): Opens the menu. Emits beforeopen and open events.
    • slideout.close(): Closes the menu. Emits beforeclose and close events.
    • slideout.toggle(): Toggles between open and closed states.
    • slideout.isOpen(): Returns true if the menu is open, false otherwise.
    • slideout.destroy(): Cleans up the instance to allow creating a new one on the same elements.
    • slideout.enableTouch(): Enables opening via touch events.
    • slideout.disableTouch(): Disables opening via touch events.

  5. Initialize Slideout with options

    master

    Create a new instance of Slideout by passing an options object to the constructor.

    Options Reference:

    • panel (HTMLElement, Required): The DOM element containing application content (.slideout-panel).
    • menu (HTMLElement, Required): The DOM element containing the menu (.slideout-menu).
    • duration (Number, Default: 300): Animation time in milliseconds.
    • easing (String, Default: ease): CSS easing function (e.g., linear, ease-in-out, or a cubic-bezier string).
    • padding (Number, Default: 256): The width of the menu.
    • tolerance (Number, Default: 70): Pixels needed to fully open the menu via touch, otherwise it closes.
    • touch (Boolean, Default: true): Set to false to disable touch events.
    • side (String, Default: left): The side to open the menu (left or right).
    var slideout = new Slideout({
  'panel': document.getElementById('panel'),
  'menu': document.getElementById('menu'),
  'padding': 256,
  'tolerance': 70,
  'easing': 'cubic-bezier(.32,2,.55,.27)'
});

  6. Configure Slideout options

    master

    When initializing Slideout, you can provide the following configuration options:

    OptionDefaultDescription
    panelRequiredThe DOM element that will be translated (the panel).
    menuRequiredThe DOM element that is revealed when the panel slides.
    side'left'The side the menu slides from ('left' or 'right').
    touchtrueBoolean to enable or disable touch interaction.
    fx'ease'The easing function for the transition (also accepts easing).
    duration300Transition duration in milliseconds (also accepts duration as a string).
    tolerance70The touch movement tolerance in pixels.
    padding256The padding used to calculate touch translation.

  9. Control the Slideout menu state

    master

    Use the following methods to control the visibility of the slideout menu:

    • open(): Opens the slideout menu. Emits beforeopen and open events.
    • close(): Closes the slideout menu. Emits beforeclose and close events.
    • toggle(): Toggles between open and closed states.
    • isOpen(): Returns true if the menu is currently open, false otherwise.

  11. Use Slideout events

    master

    Since Slideout inherits from Emitter, you can listen to various lifecycle events:

    • beforeopen / open (triggered during opening sequence)
    • beforeclose / close (triggered during closing sequence)
    • translatestart / translate / translateend (triggered during touch interaction)

    Note: The exact event names are used by the internal Emitter.