Inside Technique : IE Menu Toolkit : Defining Menus

Defining a menu with the Menu Toolkit is as simple as defining an HTML table. Below is the sample menu from the introduction page with its corresponding HTML:

Working Example only available in Internet Explorer 4.0.

<!--The ID=menuBar identifies that this table is a menu. -->
<TABLE ID=menuBar ONSELECTSTART="return false" ONCLICK="processClick()" ONMOUSEOVER="doHighlight(event.toElement)" ONMOUSEOUT="doCheckOut()" ONKEYDOWN="processKey()">
  <!-- class=root is required on all top level table cells to identify each drop-down menu.
       The title is optional and can be added to any menu choice to add a tooltip.
    -->
  <TR><TD class=root TITLE="This is a sample navigation menu">Go
    <!-- By nesting a table below a menu choice, you create the menu hierarchy. 
         Below are the choices for the "Go" menu 
      -->
    <TABLE CELLSPACING=0 CELLPADDING=0>
       <!-- Each menu option can also contain rich HTML -->
       <TR><TD NOWRAP><EM>Home</EM></TD></TR>
       <!-- The ID=break is required whenever a disabled horizontal bar is required -->
       <TR><TD ID=break NOWRAP><HR></TD></TR>
       <!-- A 4 is created using the SPAN element defined below. 
            The set of nested options is specified by nesting another table.
            Due to HTML formatting rules, the <TABLE> tag is defined on the same line in the
            source as as the current option. Moving the <TABLE> definition onto the following 
            line causes the menu to slightly resize itself when nested choices are displayed.
         -->
       <TR><TD NOWRAP><SPAN class=more>4</span>Features<TABLE CELLSPACING=0 CELLPADDING=0>
          <TR><TD NOWRAP><IMG SRC="/gifs/inside.jpg" align=middle width=10 height=15 style="margin-left: -11pt">Book Information</TD></TR>
          <TR><TD NOWRAP>Discussion Forum</TD></TR>
          <TR><TD NOWRAP>Fun and Games</TD></TR>
          <TR><TD NOWRAP>The 10K Demo</TD></TR>
          <TR><TD NOWRAP>XML Online</TD></TR>
          <TR><TD NOWRAP>CSS Online</TD></TR>
          </TABLE>
        <TR><TD NOWRAP><SPAN class=more>4</span>Developers Paradise<TABLE CELLSPACING=0 CELLPADDING=0>
           <TR><TD NOWRAP>Positioning Library</TD></TR>
           <TR><TD NOWRAP>Inside Techniques</TD></TR>
           <TR><TD NOWRAP>Inside Scriptlets</TD></TR>
           <TR><TD NOWRAP>DHTML Toolkits</TD></TR>
          </TABLE>
    </TD></TR><TABLE>
  <TD class=root CELLSPACING=0 CELLPADDING=0 nowrap TITLE="You can set foreground and background colors.">Colors
    <!-- Since tables are used to define the menu, both horizontal and vertical sub-menus can be defined -->
    <TABLE CELLSPACING=0 CELLPADDING=0>
      <TR><TD NOWRAP><SPAN class=more>4</span>Background<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>
      <TR><TD NOWRAP><SPAN class=more>4</span>Background<TABLE NCLICK="setColor(true)" 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>
       </TR></TABLE>
  </TD>
    <!-- The following is a special cell that is used to extend the background to the right edge -->
    <TD WIDTH=100% class=clear>&nbsp;
  </TD></TR>
</TABLE>

The table's appearance is transformed into a menu using a specially designed style sheet. By supplying the table with ID=menuBar, a set of menu styles is automatically applied to the table.

    /* Define the style sheet for the menu bar */
    #menubar {position: relative; font: menu; cursor: default; background: lightgrey ; }
    /* Style for the top-level menu items */
    #menubar .root {border: 1px lightgrey solid; padding-left: 2pt; padding-right: 2pt}
    /* Style for nested menus. display: none is used to ensure nested menus are not initially visible */
    #menubar TABLE {font: menu; margin: 0pt; padding: 0pt; background: lightgrey; border-left: 2px #EEEEEE solid; border-right: 2px gray solid; border-bottom: 2px gray solid; border-top: 2px #EEEEEE solid; display: none; position: absolute}
    #menubar TABLE TD {padding-top: 2pt; padding-bottom: 2pt; padding-left: 12pt; padding-right: 15pt; margin: 0pt}
    /* Style for highlighted elements */
    #menubar .highlight {color: white; background: navy}
    /* Style for highlighting disabled elements */
    #menubar .disabledhighlight {background: navy; color: gray}
    /* Style for disabled and break elements */
    #menubar #break, #menubar .disabled {color: gray}
    /* Remove padding and margins for break elements (horizontal bars) */
    #menubar #break {padding: 0pt; margin: 0pt}
    /* Style for the arrow representing more choices */
    #menubar .more {font: 9pt webdings; position: relative; height: 9pt; left: 14pt; top: -2pt; margin: 0pt; padding: 0pt;float: right; width: .8em}
    /* Style for aligning elements in the margin to the left of the text */
    #menubar .left {margin-left: -11pt}

The stylesheet defines a number of special styles for specifying menu breaks, disabled items, and to place text in the margins of th menu. (eg., the more choices symbol). Below demonstrates how to use these special cases:

• Specifying a menu break.

  Menu breaks are specified by giving the table cell ID=break and specifying the contents of the cell to be a <HR> element. Menu breaks should never include nested sub-items. For example:

  <TD NOWRAP ID=break><HR></TD>

• Specifying a disabled item.

  Disabled items are rendered in gray text and cannot be selected. Disabled items can have a sub-menu specified, but the sub-menu is not accessible unless the menu choice is late reenabled. A disabled menu choice is specified with class=disabled. To reenable the menu, code needs to change the value of the className property from "disabled" to another class (or an empty string). For example:

  <TD NOWRAP CLASS="disabled">Disabled Menu Item</TD>

• Adding 4 to a menu

  Menus normally provide an indicator when a menu option contains a nested sub-menu. To add the traditional indicator, 4, to a menu, you need to add an extra element to the beginning. Rather than use an image, we use the webdings font and its rendering of the character 4 to display the arrow:

  <TD NOWRAP><SPAN CLASS=more>4</SPAN>Cool Places<TABLE ....

Next we discuss how to respond to a user selecting from the menu.

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