• List item 1
      • List item 2
      • List item 3
      • List item 1
      • List item 2
      • List item 3
      • List item 1
      • List item 2
      • List item 3
    • List item 1
    • List item 2
    • List item 3
    • List item 1
    • List item 2
    • List item 3

Page Notes

This page demonstrates a simple collapsible menu control, which I'm calling a Submenu.

It's implemented as a custom HTML element called <gw-submenu>. For each submenu element, you should either define a <details> element, or define a <button> to toggle the submenu and an element with the toggleable content. The IDs of these elements must be set into the attributes of the <gw-submenu> element.

You can define these togglable elements anywhere on the page, not just inside the <gw-submenu>.

Attributes

group
A string identifier for the group of submenus to which this element belongs. Among the elements in this group, only one may be expanded at a time.
button
The ID of the <button> element used to toggle the visibility of the submenu's content.
content
The ID of the submenu's content element.
details
The ID of the submenu's <details> element.

Styling

Styles may be applied to the buttons with the class submenu-button and to the collapsible contents with the class submenu

As an example, here is the styling for the navbar on the homepage (where .submenu is the toggleable content):

gw-submenu .submenu {
  position: absolute;
  background-color: var(--background-color);
  z-index: 1;  
  border: 1px solid var(--border-color);
  padding: 5px;
  margin-right: 5px;
}

Files

Add the highlighted files to your page to get started!

Markup

  • submenuDemo.html

Scripts

  • submenuControl.js
  • personalizationControl.js

Styles

  • submenuDemo.css