A Library That Helps You Write a Static Dropdown Menu | JSPanel

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

See Demo And Download

Official Website(CodoPixel): Click Here

This superior jQuery/javascript plugin is developed by CodoPixel. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…