A Library That Helps You Write a Static Dropdown Menu

JSPanel is A library that helps you write a static dropdown menu, a panel, that follows the digital accessibility recommendations.

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 pop-out menu by clicking either the Enter or Space key.

javascript add to context menu, right click context menu javascript, javascript floating window, javascript movable panels, jspanel demo javascript panel layout

How to make use of it:

1. Insert the JSPanel’s JavaScript and Stylesheet into the web 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 aspect on the web page.

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

4. Define your individual menu objects in an array.

const menuList = [
      { 
        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 connect the menu to the set off aspect as follows:

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

6. Determine the place 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;
}

Easy Accessible Popout Menu, JSPanel Plugin/Github