Desktop Like Menu Bar In JavaScript – jdmenubar

Preview:

Description:

jdmenubar is a JavaScript library for creating multiple dropdown menu bars (also known as toolbars and taskbars) just like you’ve seen on desktop OS such as Windows and macOS.

How to use it:

1. Import the jdmenubar’s JavaScript and CSS files into the document.

<!-- Stylesheet -->
<link rel="stylesheet" href="jdmenubar.css" />
<!-- Main JavaScript -->
<script src="jdmenubar.js"></script>

2. Define your menu items and separators in a JS array as follows:

const menuItems = [
      { text : "File", id : 1, subMenuItems : [
        { text : "New", handler : newClicked, shortcut : "Ctrl+N", icon : "✏"},
        { text : "Open" },
        { text : "Open Recent", subMenuItems : [
            { text : "File1.txt"},
            { text : "File2.txt"},
            { separator : true},
            { text : "Or even older" , subMenuItems : [
                { text : "File3.txt"},
                { text : "File4.txt"},
            ]}
        ]},
        { separator : true},
        { text : "Save", shortcut : "Ctrl+S", icon : "💾", enabled : false },
        { text : "Save As...", shortcut : "Ctrl+Shift+S" }
      ]}, 
      { text : "Edit", subMenuItems : [
        { text : "Cut", icon : "✂️" },
        { text : "Copy", icon : "📄" },
        { text : "Paste", icon : "📋"},
      ]}, 
      { text : "Help", subMenuItems : [
        { text : "More", icon : "☃", subMenuItems : [
            { text : "This" },
            { text : "And that" },
        ]},
        { text : "About", handler : aboutClicked},
      ]}, 
]

3. Create a placeholder element for the menu bar.

<div id="menu-bar"></div>

4. Generate a new menu bar.

menubar = new MenuBar(document.getElementById("menu-bar"), menuItems);

5. Customize the appearance of the menu bar by overriding the following CSS variables.

:root {
  --jdmenu-bg-color: rgb(0,250,250);
  --jdmenu-border-color: rgb(0,200,200);
  --jdmenu-focus-color: rgb(0,235,235);
  --jdmenu-shortcut-color:rgb(0,100,100); /* Also for disabled items */
  --jdmenu-font-size: 25px;
  --jdmenu-font-family: "Comic Sans MS", "Comic Sans", cursive;
  --jdmenu-font-color: rgb(0,0,0);
}

Changelog:

04/01/2022

• Bugfix