Creating a popup menu

In this guide we will look at creating a simple menu with the HCJE. The menu bar comprises a single button that is used to open the menu and another button that is used to close it. When the menu is opened the

Menu closed When the menu is closed, only the button used to open the menu is displayed.

[Opener]

Menu open

When the menu is open, the opener is hidden and the closer, along with any children, is displayed.

[Closer] [Child 1] [Child 2] ... [Child 3]

The following code shows the construction of a simple MenuBar. In this example, we create three buttons. One is used as the opener, another as the closer, and the third one just pops up an alert message and is added to the menu bar's children array.

  const aboutOption = new hcjeLib.domTools.Button({
    label: 'About',
    url: hcjeLib.utils.getHcjeAssetHref('buttons_info.png'),
    onClick: () => alert('About has been pressed')
  });

  new hcjeLib.domTools.MenuBar({
    opener: new hcjeLib.domTools.Button({
      label: 'Open menu', 
      url: hcjeLib.utils.getHcjeAssetHref('buttons_menu.png')
    }),
    closer: new hcjeLib.domTools.Button({
      label: 'Close menu', 
      url: hcjeLib.utils.getHcjeAssetHref('buttons_cancel.png')
    }),
    children: [aboutOption]
  });

Note

The code above uses images from the HCJE for the buttons. These are located using the hcjeLib.utils.getHcjeAssetHref method. See Using HCJE assets for more information.