Menu WebComponent
npm install @satachito/jp-menuhttps://satachito.github.io/jp-menu/
https://recrateg.web.app/
CSSin
```
at the bottom of the
, before using it.`
`Menu Data Strucure
A menu is an array of menu element.
In menu, if a menu element is a type of Array, it has child menu, i.e. it is
node element, otherwise it is leaf element.#### Sample
*
[ 'A', 'B', 'C' ]This menu has three
leaf elements, no node element.*
[ [ 'A' [ 'AA', 'AB' ] ], 'B' ]This menu has one 'node' element
'A' which has sub menu with two leaf elements 'AA' and 'AB'.Also this menu has one
leaf element 'B'.
Static
Supply menu data to
'json' attribute as JSON string.`index.html json='[
[ "Sun"
, [ "Mercury"
, [ "Venus"
, [ "2002 VE68" ]
]
, [ "Earth"
, [ "Moon" ]
]
, [ "Mars"
, [ "Phobos"
, "Deimos"
]
]
, [ "Jupiter"
, [ "Io"
, "Europa"
, "Ganymede"
, "Callisto"
]
]
]
]
, "Sirius"
, "Canopus"
, "α Centauri"
, "Arcturus"
]'
>Initial TEXT
`Dynamic
Supply menu data to constructor.
`
const data = [
[ "Sun"
, [ "Mercury"
, [ "Venus"
, [ "2002 VE68" ]
]
, [ "Earth"
, [ "Moon" ]
]
, [ "Mars"
, [ "Phobos"
, "Deimos"
]
]
, [ "Jupiter"
, [ "Io"
, "Europa"
, "Ganymede"
, "Callisto"
]
]
]
]
, "Sirius"
, "Canopus"
, "α Centauri"
, "Arcturus"
]const
menu2 = document.body.appendChild( new JPMenu( 'Menu2', data ) )
menu2.id = 'Menu2'
menu2.nodeCallback = menu2.leafCallback = ( text, path ) => menu2.firstChild.textContent = path + ':' + text
``JPMenu has two callbacks:
* leafCallback
* nodeCallback
which take two arguments:
* text - Selected Text.
* path - The path to descned data hierarchy.
Those defaults are setting selected menu to show up.
JPMenu's first child is text node.
Set text content of this text node shows given string.