This behavior provides basic hierarchical menu functionality


that have this behavior applied by default to:


Example of menu declaration in Sciter:

  <li id="file-open">Open File <span.accesskey>Ctrl+O</span></li>
  <li id="file-save">Save File <span.accesskey>Ctrl+S</span></li>
  <li id="file-save-as">Save File as ...<span.accesskey>Ctrl+Shift+S</span></li>

<li> elements or any other block element that has role=menu-item attribute defined are treated as selectable menu items and can generate MENU_ITEM_CLICK events.

For example, this markup:

    <tr><td role="menu-item" id="red">Red</td>
        <td role="menu-item" id="green">Green</td>
        <td role="menu-item" id="blue">Blue</td></tr>
    <tr><td role="menu-item" id="cyan">Cyan</td>
        <td role="menu-item" id="magenta">Magenta</td>
        <td role="menu-item" id="yellow">Yellow</td></tr>

will render popup menu with menu items organized in 3x2 table.

Menu items may have sub-<menu>s

  <li id="file-open">Open File <span.accesskey>Ctrl+O</span></li>
  <li>Recent Files
    <menu id="LRU">
      <li>My file.htm</li>
      <li>His file.htm</li>
      <li>Her file.htm</li>


behavior:menu is not using any specific attributes.  


Normally menus are invisible - declared with display:none styles. As menus have quite specific life cycle their visibility cannot be described in terms of CSS.

To show the menu you shall call menuOwnerElement.popup(menuElement, ...). Where the menuOwnerElement is the DOM element that will "own" the menu and menuElement is one of <menu> elements that you want to present for the owner element.



- posted when user clicks on menu item, is the menu item.
- is send when user activates the menu by mouse hovering or by navigating keys. is the menu item.
Menu item events get propagated in so called menu tree order. Element that owns the menu will receive all MENU_ITEM_CLICKs originated from menu it owns.



Menu item clicks handling in script

raw onControlEvent handler
var edit = $(input#some);
edit.onControlEvent = function(evt)
  switch(evt.type) {
    case Event.MENU_ITEM_CLICK: /* is the menu item */ break;

on() subscription

var edit = $(input#some);
edit.on("click", "li#file-open", function(evt) { 
  // 'this' here is that li#file-open item  

decorators.tis handler

include "decorators.tis";
@click @on "li#file-open" :: ... event handling code ...;