Programmatic HTML5 menu generator with CSS & ES6 JS dropdown/dropside collapser of menu/list items with no dependencies.
Very small CSS & JS dropdown/dropside collapser of menu/list items with no dependencies.
It allows you to programmatically create a multi-level, collapsable menu from a nested array data.
# bindMenu(data, parent) [<>]
The data is a nested array in a recursive form of [item1, item2, …].
A menu item is either [item.innerHTML, sub_items, {attribute1: value1, …}], or [item.innerHTML, click_event_handler, {attribute1: value1, …}].
import {bindMenu} from './menu.js';
const menu = [
["File", [
[`New`, [
[`New File`, createNewFile, {backgroundColor: "red"}],
[`Drama<small>Ctrl+N</small>`, [
["Image", createNewImage],
]]
]],
[`Save`,],
[`Load`, () => console.log("Load button clicked.")],
['hr'], // Horizontal Line divider.
[`Import`, importFile],
[`Export`,]
]],
["Edit", [
["Undo",],
["Redo",]
]]
];
bindMenu(menu, document.querySelector('menu'));