Easy Accessible Popout Menu In JavaScript – JSPanel

Preview:

Description:

JSPanel is a standalone JavaScript library that attaches an accessible popup menu to any trigger element (for example floating action button) you specify.

Users can open or close the popout menu by clicking either the Enter or Space key.

How to use it:

1. Insert the JSPanel’s JavaScript and Stylesheet into the page.

<link rel="stylesheet" src="src/panel-style.css">
<script src="src/JSPanel.js">

2. Load the Font Awesome for the menu icons.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

3. Create a trigger element on the page.

<button id="panel-controller">+</button>

4. Define your own menu items in an array.

const menuList = [
      { 
        id: 0,
        title: "My Profile",
        icon: "", // custom icon path 
        fontawesome_icon: "far fa-user", // or use font awesome icons
        fontawesome_color: "#fff",
        className: "additional CSS Classes",
        attributes: [["data-thing", "thing"], ...[]],
        onclick: () => console.log("clicked on profile") 
      },
      { separator: true, },
      // ... more menu items here
],

5. Initialize the JSPanel and attach the menu to the trigger element as follows:

const button = document.querySelector("#panel-controller");
const panel = new JSPanel(button, {
      items: menuList
});

6. Determine the position of the popout menu.

const button = document.querySelector("#panel-controller");
const panel = new JSPanel(button, {
      items: menuList,
      top: null,
      bottom: null,
      left: null,
      right: null,
});

7. Override the default styles of the popup menu.

:root {
  --panel-background-color: #fff;
  --panel-box-shadow: 0 0 4px rgba(204, 204, 204, 0.75);
  --panel-width: 160px;
  --panel-text-color: #404040;
  --panel-hover-item-background-color: #f4f6fa;
  --panel-hover-item-color: #385074;
  --panel-icon-width: 13px;
  --panel-separator-color: #dfe3eb;
}

8. API methods.

panel.toggleItem(id:number, disable=false);
panel.removeItem(id:number);
panel.removeItems(ids:number[]);
panel.getAllIDS();
panel.getItem(id:number):;
panel.addItem(item);
panel.replaceItemWith(item, id:number);
panel.deletePanel();

Changelog:

v1.2.1 (04/30/2021)

• fix(): add z-index CSS property

v1.2.0 (04/29/2021)

• added new options and methods.

v1.1.3 (04/28/2021)

• include null items

v1.1.2 (04/26/2021)

• Bug fixes