Inside Technique : IE Menu Toolkit : Hooking Events

Once you finish defining your menu, you need to define event handlers to respond to the user's selection. Adding an event handler for a menu choice is as easy as adding an ONCLICK handler to a specific menu choice's table cell:

<TD ONCLICK="quitWhenClicked()">Quit</TD>

You can also take advantage of event bubbling and write generic event handlers. The color selector was written with a single onclick event handler, rather than an event handler for each color. This was accomplished by putting the event handler on the TABLE containing the color menu:

<SCRIPT>
       function setColor(which) {
         // Make sure user clicked in a table cell.
         if (event.srcElement.tagName=="TD") 
           if (!which)
             why.style.backgroundColor = event.srcElement.bgColor
           else             
             why.style.color = event.srcElement.bgColor
       }
</SCRIPT>

<TABLE ONCLICK="setColor(false)" CELLSPACING=0 CELLPADDING=0 border ID=colors>
          <TR><TD BGCOLOR=red>&nbsp;<TD BGCOLOR=blue>&nbsp;<TD BGCOLOR=green>&nbsp;<TD BGCOLOR=white>&nbsp;
          <TR><TD BGCOLOR=black>&nbsp;<TD BGCOLOR=purple>&nbsp;>TD BGCOLOR=orange<&nbsp;<TD BGCOLOR=gray>&nbsp;
         </TR></TABLE>

In some cases, you may want to trap all your menu options in a single function. The Menu Library provides a function you can customize for handling all menu selections. This function is currently defined in the library and should not be defined in duplicate in your page's script.

<SCRIPT>
  function menuHandler(menuItem) {
    // Write generic menu handlers here. The menuItem argument contains the table cell the user clicked in.
    // Returning true collapses the menu. Returning false does not collapse the menu
 
    // Below demonstrates how you can add an ID to each table cell and track the menu choice based on ID.
    switch (menuItem.id) {
      case home: break; // user selected home
    }
    return true
  }
</SCRIPT>

The switch statement above demonstrates using the ID attribute to distinguish between menu options in a generic handler.

In general, since your menus are specially formatted tables, all the event's and techniques available for tables are also available for your menus. To help bring this all together, the next page demonstrates embedding the style sheet and code library on your web page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.