Note: Context menu functionality is only available in Mozilla (+ related browsers, i.e. Netscape 7+, Galeon, Chimera, etc.) and Internet Explorer. Other browsers don't cooperate on this.

Look, context menus with one function call! :-)

This paragraph has a context menu associated with it. Right-click somewhere inside it.

This is another paragraph that has a different context menu. Right-click somewhere inside it.

This is yet another paragraph which shows that we can also put arbitrary HTML inside the context menus.

Now the explanations

All these context menus are created with only one function call. The menu is defined like usual, in an <UL> element, but we initialize it this way: 

DynarchMenu.setup('menu', { context: true });

Note the “context: true” parameter. When DynarchMenu encounters this parameter, the main menu bar will never appear, and any popups directly defined in it can act as context menus for certain HTML elements. You need to identify those elements by assigning them a certain ID in your HTML code, and passing the ID to the menu. How do we do this? Well, reading the source of this page should be pretty straightforward, but here are more explanations. Suppse you have the following HTML code: 

<p id="paragraph1"> ... text text text ... </p>

In order to assign a context menu to it, your menu would look like this (starting with the toplevel UL element): 

    <ul id="menu">
      <li class="context-for-paragraph1">
        <ul>
          <li>
            Foo Bar item _1
          </li>
          <li>
            Foo Bar item _2
          </li>
          <li></li>
          <li>
            With submenu
            <ul>
              <li>Submenu 1 Item 1</li>
              <li>Submenu 1 Item 2</li>
              <li>Submenu 1 Item 3</li>
              <li>Submenu 1 Item 4</li>
            </ul>
          </li>
          <li>
            <a href="javascript:alert(new Date())">This shows date</a>
          </li>
        </ul>
      </li>
    </ul>

So, as you can see, it's just like an ordinary menu, but however, one thing is important to note: the class name of the LI element that contains the context menu. It's “context-for-paragraph1”—this tells DynarchMenu that the submenu of that item should open when someone right-clicks the element with the ID “paragraph1” (which, as you remember, is our paragraph).

Of course, your toplevel UL can contain multiple submenus; they can be “context-for-whatever”—therefore, you can define multiple context menus in a single UL element, and initialize them all with one function call.

Context menu for the document element?

Never has this been easier! :-) Just use the exact same technique, and assign an ID to the <BODY> element.