项目作者: kennygomdori

项目描述 :
Programmatic HTML5 menu generator with CSS & ES6 JS dropdown/dropside collapser of menu/list items with no dependencies.
高级语言: CSS
项目地址: git://github.com/kennygomdori/Yeti-Collapsing-Menu-Generator.git
创建时间: 2018-10-28T08:37:01Z
项目社区:https://github.com/kennygomdori/Yeti-Collapsing-Menu-Generator

开源协议:MIT License

下载


Collapser

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.

API Reference

# 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, …}].

  1. import {bindMenu} from './menu.js';
  2. const menu = [
  3. ["File", [
  4. [`New`, [
  5. [`New File`, createNewFile, {backgroundColor: "red"}],
  6. [`Drama<small>Ctrl+N</small>`, [
  7. ["Image", createNewImage],
  8. ]]
  9. ]],
  10. [`Save`,],
  11. [`Load`, () => console.log("Load button clicked.")],
  12. ['hr'], // Horizontal Line divider.
  13. [`Import`, importFile],
  14. [`Export`,]
  15. ]],
  16. ["Edit", [
  17. ["Undo",],
  18. ["Redo",]
  19. ]]
  20. ];
  21. bindMenu(menu, document.querySelector('menu'));