Special class names

Menu items and menu popups can be customized individually by writing certain class names on the <ul> or <li> element that defines the popup/item.

At the time of this writing (version 2.7), DynarchMenu supports the following special classes:

• disabled — pass this class name if you wish the menu item to be disabled, like this:

  <li id="item-save-as" class="disabled">Save as...</li>

  That item can be later enabled from JavaScript like this:

  menu.items["item-save-as"].disable(false);

  (where “menu” is a reference to the DynarchMenu object as returned by DynarchMenu.setup).

• context-for-ELEMENT_ID — using this class name you can define a context menu for a single element. The ELEMENT_ID must be the id of that element. Unlike what would normally seem obvious, this class name is assigned to the LI element that contains the submenu, not to the UL element. Please see our context menu sample for more information.

• context-class-TAG-CLASS — with this class name you can define a custom menu for multiple elements--that is, for all elements that exist in the document having the tag “TAG” and the class “CLASS”. More information in our second context menu sample.

• open-left — use this class on an UL element that defines a popup that you want to open to the left side. DynarchMenu prefers to open popups to the right, unless there is enough space—in which case it will open the popups to the left. If you pass this option though, DynarchMenu will always open that particular popup to the left. Example:

  <li>
    Help
    <ul class="open-left">
      <li>About us</li>
      <li>Etc.</li>
    </ul>
  </li>

  When one clicks the “Help” item above, the submenu that appears will be opened to the left side.

Not so special class names

Any class name passed to the elements that define your menu will be propagated in the menu itself. This means that you can customize individual items' appearance, for instance, by using your own class names and by defining how you want those items or popups to look like. Here is a sample that shows you how to use this feature.