Author: | GastonZalba |
---|---|
Views Total: | 45 views |
Official Page: | Go to website |
Last Update: | September 14, 2023 |
License: | MIT |
Preview:

Description:
A lightweight JavaScript popup menu library to easily add context menus or dropdowns that open on click or right click of a trigger element.
The popup isn’t just limited to menu items. You can insert any custom elements, making it adaptable to various use cases.
How to use it:
1. Import the Tiny Popup Menu’s JavaScript and Stylesheet.
<link rel="stylesheet" href="/dist/css/tiny-popup-menu.css" /> <script src="/dist/tiny-popup-menu.js"></script>
2. Initiate a new instance of TinyPopupMenu and define your menu items. These items should be structured as a JavaScript array of objects as follows:
const myMenu = new TinyPopupMenu({ menuItems: [ { content: 'Menu Item 1', callback: () => alert('You Clicked Item 1') }, { content: 'Menu Item 2', callback: () => alert('You Clicked Item 2') }, '-', // separator { content: 'Menu Item 3', callback: () => alert('You Clicked Item 3') }, // ... more items here ] });
3. Enable a button to toggle the popup menu.
myTogglerButton.onclick = function (event) { myMenu.open(event); };
4. Or attach the popup menu to a toggle button programatically.
myMenu.addToggler(myTogglerButton, { // options }, 'click' // custom trigger event );
5. All default options.
const myMenu = new TinyPopupMenu({ // or 'top' position: "bottom", // additional CSS class className: '', // only one popup menu is activated at a time autoClose: true, // shows arrow indicator arrow: true, // custom margin margin: 5, // custom x/y offsets offset: { x: 0, y: 0 }, // menu items here menuItems: [], // prevents the native click event stopClick: true });
6. Events.
// triggered on open myMenu.on('open', () => console.log('Open event')); // triggered on close myMenu.on('close', () => console.log('Close event')); // triggered on update myMenu.on('updateposition', () => console.log('Update position event'));
Changelog:
v1.0.9 (09/14/2023)
- Added visibility:hidden to submenu
v1.0.8 (09/14/2023)
- Added hoverable submenu option
- Improved postcss configuration
- Improved some scss variables