Easy Accessible Popout Menu In JavaScript – JSPanel

Category: Javascript , Menu & Navigation | April 30, 2021
Author: CodoPixel
Views Total: 104 views
Official Page: Go to website
Last Update: April 30, 2021
License: MIT

Preview:

Easy Accessible Popout Menu In JavaScript – JSPanel

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

You Might Be Interested In:


Leave a Reply