JSPM – side-panel-menu-thing@2.0.2

Package Exports

side-panel-menu-thing
side-panel-menu-thing/dist/side-panel-menu-thing.mjs
side-panel-menu-thing/dist/side-panel-menu-thing.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (side-panel-menu-thing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

example

https://henrygd.me/side-panel-menu-thing

Touch responsive, easy to implement, fairly lightweight, and MIT licensed. Good option for mobile menus, general content reveals, or whatever else.

ES Module: dist/side-panel-menu-thing.mjs
UMD: dist/side-panel-menu-thing.umd.js
IIFE / CDN: dist/side-panel-menu-thing.min.js
Svelte: src/side-panel-menu-thing.js

Install

$ npm install side-panel-menu-thing

Grab the few lines of CSS from dist/side-panel-menu-thing.css and add to your styles, or import from the package.

Usage and options

import sidePanel from 'side-panel-menu-thing'

// target and content required, others optional
const menu = sidePanel({
    // target container (where it's mounted and listens for touch)
    target: document.body,
    // element mounted in panel (will be removed if it exists in DOM)
    content: document.getElementById('content'),
    // width of panel
    width: 400,
    // open / close animation time
    duration: 450,
    // fixed to screen
    fixed: true,
    // open on left
    left: false,
    // whether to open on touch drag
    dragOpen: true,
    // prevent HTML scrolling when fixed
    preventScroll: true,
    // custom css class(es) added to wrap element (separate multiple with spaces)
    wrapClass: '',
    // runs when the menu is opened (as soon as it's visible)
    onShow(container) {
        console.log('showing', container)
    },
    // runs when the menu is closed (as soon as it's hidden)
    onHide() {
        console.log('hidden')
    },
})

// options are accessible / changeable afterward
menu.width
// 400
menu.width = 500
// 500

Methods

// show the panel
menu.show()

// hide the panel
menu.hide()

// destroy
menu.$destroy()

Disable drag opening on certain elements

If you have a fixed menu set to open on drag, but want disable on a specific element, add a data-no-panel attribute to the html.

<div class="slider" data-no-panel>
    <div class="slide"></div>
    <div class="slide"></div>
</div>

Usage with Svelte

This project uses Svelte internally, so you can save some bytes by importing the source files. This may happen automatically if your project picks up the svelte field in package.json, but to be sure you can use the import statement below.

import sidePanel from 'side-panel-menu-thing/src/side-panel-menu-thing'

If you want a proper standalone component with a slot, let me know.

License

MIT

side-panel-menu-thing