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
$ 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.
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// show the panel menu.show() // hide the panel menu.hide() // destroy menu.$destroy()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>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.
MIT