Export (0) Print
Expand All

Creating a JavaScript Drop-Down Menu in FrontPage

Office 2003
 

Lisa Wollin
Microsoft Corporation

December 2004

Applies to:
    Microsoft Office FrontPage 2003
    Microsoft FrontPage 2002
    Microsoft FrontPage 2000

Summary:   Drop-down menus of all types are popular everywhere you look on the Internet, but if you have ever tried to create one, you know it may not always be easy. This article explains the script and styles that you need to create your own drop-down menus. (24 printed pages)

Contents

Introducing Drop-Down Menus
Creating the Simple Drop-Down Menu
Variations on the Simple Drop-Down Menu
Code Listings for Drop-Down Menus
Conclusion
Additional Resources

Introducing Drop-Down Menus

Almost every site on the Internet has a drop-down menu of one kind or another. You can find simple drop-down menus that line up horizontally across the top of a page, more complex ones that cascade with submenus, some that use graphics with mouseover effects, and still others that line up vertically along the left or right side of a page. If you have ever wanted a drop-down menu for your own Web site, this article should help you get started and demystify what seems to be mysterious functionality.

Most drop-down menus use Dynamic HTML (DHTML) to create a special show/hide behavior. All DHTML gets its special functionality from a combination of client-side scripts and CSS styles. Generally, this means that when a user performs an action, an event in the browser fires causing the browser to run a script that changes the display properties of one or more elements.

This article shows you three variations of drop-down menus. You can use the examples in this article to create your own drop-down menus. The first example is a simple drop-down menu. The other two drop-down menu examples are variations of the first example: one that has cascading menus and another that uses images.

Note   The code for two of the examples in the Code Listings section is at the end of this article. For the third example, instructions explain how to modify one of the other examples.

All of the drop-down menu examples in this article work in Microsoft Internet Explorer version 5.0 or later. The simple drop-down menu example and the drop-down menu example with images also work as expected in Opera, Mozilla, and Netscape Navigator. The cascading drop-down menu example does function as expected in Internet Explorer and Opera but not in Mozilla or Netscape Navigator.

In addition, the HTML examples in this article use the following DOCTYPE. If you specify a different DOCTYPE, the code may not function as you expect or want. In this case, you may need to make changes to the code to make it function appropriately with a different DOCTYPE. (For more information, see Working with HTML DOCTYPE Declarations in FrontPage.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

Creating the Simple Drop-Down Menu

The simple drop-down menu example produces a horizontal menu across the top of the page. When a user positions a mouse pointer over each of the menu items, the browser displays a drop-down list of items. Figure 1 shows how the menu appears in Internet Explorer.

Figure 1. Simple drop-down menu

The sections that follow explain the HTML, JavaScript, and CSS code that you need to create this drop-down menu. You can find a full code listing in the code listing section at the end of this article.

Note   A complete discussion of the HTML, scripting objects, properties, methods, events, and CSS attributes that are used to create the menus in this article are beyond the scope of this article. For more detailed information about these subjects, see the HTML and Dynamic HTML reference in the Web Development section of the MSDN Library.

HTML Code for the Simple Drop-Down Menu

The drop-down menu is created by using a table. The menu table is relatively simple, as is shown in Listing 1.

<table class="navbar" width="800">
  <tr>
    ...[missing TD elements]
  </tr>
</table>

Listing 1. Main menu bar table

The menu table has a class attribute value of "navbar" that is associated with a named style class, and the width attribute is set to a fixed pixel measurement of 800. (If you specify a different measurement or a percentage, you may need to change the measurements for individual columns in the table, which may change how the menu behaves when displayed in a browser. See CLASS Attribute | className Property and WIDTH Attribute | width Property for more information.)

The table comprises one row (TR Element | tr Object) that contains multiple columns (TD Element | td Object). The example in this article provides five columns, each with a drop-down menu. Each drop-down menu lives within a TD element in the menu table.

The code within the TD element uses the onmouseover and onmouseout events to provide the proper show and hide functionality of the drop-down menu. (See onmouseover Event and onmouseout Event for more information.) Listing 2 shows the code for the drop-down menu TD element. To make the menu easy to work with, the code for each of the drop-down menus is exactly the same.

<td class="menuNormal" width="160"
  onmouseover="expand(this);"
  onmouseout="collapse(this);">
  <p>Menu 1</p>
  ...[missing DIV element]
</td>

Listing 2. Drop-down menu TD element

The width attribute for each TD element is set to 160 pixels, which makes each menu 20 percent of the total width of the table. If you add or remove menus or change the width of the table, you must adjust the width of each individual menu in the table. For example, if you remove one of the columns in the example so that you have four columns, the width of each menu must be 200 pixels for an 800-pixel-wide menu. If you add a menu so that you have six, the width must be approximately 133 pixels, and so on.

Each drop-down menu is contained within a DIV element nested within each top-level TD element. Within the DIV element, the code for each drop-down menu is contained within a nested TABLE element. Listing 3 shows the nested DIV and the drop-down menu table.

<div class="menuNormal" width="155">
  <table class="menu" width="155">
    ...[missing TR elements]
  </table>
</div>

Listing 3. Drop-down menu nested DIV and TABLE elements

The nested DIV element for the drop-down menu has a class attribute value of "menuNormal" and a width attribute value of "155." The nested TABLE element has a class attribute value of "menu" and a width attribute value of "155."

Each item in the drop-down menu comprises a TR element that contains a single TD element. Listing 4 shows the TR and TD elements for a drop-down menu line item.

<tr>
  <td class="menuNormal">
    <a href="page.htm" class="menuitem">Item 1</a>
  </td>
</tr>

Listing 4. Drop-down menu item

The TD element for each menu item has a class attribute value of "menuNormal". The text within the TD element is contained within an A element. (See A Element | a Object for more information.) The A element specifies a class attribute value of "menuitem". The menuitem class style uses anchor pseudo classes to define link, visited, hover, and active styles. This allows each of the menu items to have a hover effect without creating additional onmouseover and onmouseout event scripts.

JavaScript Functions for the Simple Drop-Down Menu

The JavaScript code is contained in an external JavaScript file named menu.js. The HEAD section of the page contains the code shown in Listing 5 that allows the page to access the JavaScript code contained in the file.

<script language="javascript" src="menu.js"></script>

Listing 5. External JavaScript file reference

The external JavaScript file contains two functions: one for expanding a menu (expand) and one for collapsing a menu (collapse). The following sections explain the expand and collapse functions.

The expand function

The expand function (Listing 6) is where the show action happens. The expand function takes one parameter: a reference to the TD element of the top-level menu. All of the formatting for the display of the menus is contained in CSS classes, so the expand function simply assigns the appropriate CSS class name to the className property of the TD element and the first nested DIV element. The CSS class that provides the formatting necessary to show the drop-down menu is named "menuHover," which is explained in detail in the following section.

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
  d.className = "menuHover";
}

Listing 6. Expand function

The collapse function

The collapse function (Listing 7) is where the hide action happens. The collapse function takes one parameter: a reference to the TD element of the top-level menu. All of the formatting for the display of the menus is contained in CSS classes, so, as with the expand function, the collapse function simply assigns the appropriate CSS class name to the className property for the TD element and the first nested DIV element. The CSS class that returns the menu to its original formatting is named "menuNormal," which is explained in detail in the following section.

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
  d.className = "menuNormal";
}

Listing 7. Collapse function

CSS Styles for the Simple Drop-Down Menu

The external CSS file, menu.css, contains the general CSS formatting shown in Listing 8 for the body of the page as well as P and H1 elements. You can change these styles to any formatting you may choose; however, be aware that changing them may affect how the menus appear when displayed in the browser and may require making additional changes to the menuNormal and menuHover classes.

BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;}

P
{padding-top: 10px;
margin: 0px;}

H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}

Listing 8. Basic page formatting styles

In addition to the basic formatting for the page, the menus in this article use the two general CSS class styles shown in Listing 9: one, table.navbar, sets the display of the main menu table; the other, table.menu, sets the display of the nested menu table. These class styles specify the font size and weight; they also remove any padding, margins, or borders that may have been applied to a global TABLE element style.

table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px; 
border: 0px; 
font-weight: bold;}

table.menu
{font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;}

Listing 9. General menu bar class styles

The drop-down menu TD elements and nested DIV elements use the four classes shown in Listing 10. These classes provide the display formatting for the menus in their normal onmouseout state and their expanded onmouseover state. These classes specify changes to background and text color as well as cell padding, font weight, and vertical alignment.

The main difference between the menuNormal and menuHover classes for the TD element is the background color: normal onmouseout state uses a background color of white, and expanded onmouseover state uses a background color of light blue.

The TD elements for individual menu items also use the menuNormal class to specify their normal, static formatting; however, these elements don't use the menuHover class. Instead, the menuitem class, described in the following section, provides the mouseover formatting for individual menu items.

The menuNormal and menuHover classes for the DIV element specify formatting needed to show and hide a DIV element and its contents. The normal onmouseout state for a drop-down menu DIV element is hidden, so the menuNormal class for the DIV element doesn't specify any formatting other than to set the display property to none, which is needed to hide a DIV element.

The expanded onmouseover state for the DIV element provides some basic formatting to set the border and background color for a drop-down menu. In addition, the display property is set to inline. For the simple drop-down menu described earlier in this article, the display property can be set to block; however, to correctly position a cascading submenu (described in the next section) to the left of the text for a menu item in Opera and Mozilla browsers, the display property is set to inline. And finally, the position property is set absolute. This causes the DIV element to appear as if overlayed over the text and images on the page; a different value would push the content down on the page, making room for the DIV element and its contents.

td.menuNormal
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: white;}

td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}

div.menuNormal
{display: none;}

div.menuHover
{border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;}

Listing 10. Drop-down menu normal and expanded class styles

Finally, as explained earlier, the menus in this article use anchor pseudo classes to provide mouseover effects for each of the individual menu items contained within the drop-down and cascading menus. These classes give the menu items hover effects without requiring any additional scripting. The anchor pseudo classes shown in Listing 11 apply to all A elements that have a class attribute value of "menuitem".

a.menuitem:link
{text-decoration: none;
color: black;
background-color: white;
display: block;}

a.menuitem:visited
{text-decoration: none;
color: black;
background-color: white;
display: block;}

a.menuitem:hover
{text-decoration: none;
color: black;
background-color: lightblue;
display: block;}

a.menuitem:active
{text-decoration: none;
color: black;
background-color: lightblue;
display: block;}

Listing 11. Individual menu item styles

You can find a complete listing of the CSS in the code listing section for the external CSS file.

Variations on the Simple Drop-Down Menu

This article provides two variations of the simple drop-down menu example, although there are perhaps many variations that you can design yourself. In the following sections are code and instructions that you can use to create cascading drop-down menus or top-level menu items that use images.

Creating the Cascading Drop-Down Menu

The cascading drop-down menu variation uses the same basic structure as the simple drop-down menu: a DIV element with a nested TABLE element that contains a list of items. Figure 2 shows how the cascading menus appear when displayed in Internet Explorer.

Figure 2. Cascading drop-down menu

You can modify the simple drop-down menu to create a cascading effect by changing the HTML as described in the following section.

HTML Code for the Cascading Drop-Down Menu

As explained previously, the code for each line item in the drop-down menu is contained within a TD element. Each TD element represents a single line item in the menu, so each TD element is surrounded by a TR element. As a review, the code for an individual menu item is shown in Listing 12.

<tr>
  <td class="menuNormal">
    <a href="page.htm" class="menuitem">Item 1</a>
  </td>
</tr>

Listing 12. Line item TD element

The cascading menus use the same scripts and styles as the simple drop-down menus, so all you need to create a cascading submenu is to replace the individual menu-item TD element with a TD element that contains the same HTML as a top-level TD element. Basically, you replace the TD element in Listing 12 with the TD element shown in Listing 13.

<td class="menuNormal" width="160" 
  onmouseover="expand(this);"
  onmouseout="collapse(this);">
  Menu ...
  <div class="menuNormal" width="155">
  <table class="menu" width="155">
    <tr>
      <td class="menuNormal">
        <a href="page.htm" class="menuitem">Item 1</a>
      </td>
    </tr>
    ...[missing TR elements]
  </table>
  ...[missing code]
  </div>
</td>

Listing 13. Cascading menu TD element

As you may notice, this code is exactly the same as the code shown in the previous section for the simple drop-down menu with one exception. To place the cascading menu beside the menu item text (instead of below as is done with the top-level drop-down menus), you need to remove the opening and closing <p> tags from around the menu item text and add an ellipsis at the end.

Note   The ellipsis simply indicates that the menu item leads to a submenu. You could replace the ellipsis with an image or another symbol.

Creating Cascading Submenus

Using the same simple HTML, you can add cascading submenus as many levels deep as you need by replacing the TD element for an individual line item with the TD element for a cascading menu, shown previously in Listing 13. This means that you could create a drop-down menu that contains a cascading submenu that contains another cascading submenu (as shown in Figure 3), ad infinitum.

Figure 3. Drop-down menu with multiple cascading submenus

Creating the Drop-Down Menu with Images

Adding images to the simple drop-down menu in this article is relatively simple using the Interactive Button feature in FrontPage. Figure 4 shows how the simple drop-down menu described earlier in this article appears in Internet Explorer when Interactive Buttons are added.

Figure 4. Drop-down menu with images

After adding the buttons, you need to make a few changes to one CSS class to remove the background color. The following steps explain how to modify the simple drop-down menu described previously to use images using the Interactive Button feature in FrontPage.

Note   You can use your own images instead of the button images from the Interactive Button feature. However, the Interactive Button feature provides onmouseover and onmouseout event scripts to create mouseover effects for the images. The image mouseover scripts are not provided in this article.
  1. Create a page in FrontPage and switch to Code view.
  2. Copy and paste the HTML code from Listing 14 (Complete HTML for the Simple Drop-Down Menu), replacing the existing code in the page.
  3. In Design view, highlight the text in the first cell ("Menu 1") and press Delete.
  4. On the Insert menu, click Interactive Button.
  5. Scroll through the list of buttons and select the button of your choice. The example in this article uses "Glass Capsule 1."
  6. In the Text field, type "Menu 1". For your live menu, you should type the text you want to appear on the menu, but for this example, use this generic text.
  7. The top-level menu item has no link, so leave the Link field empty.
  8. Click OK.
  9. When you use the Interactive Button feature in FrontPage to insert a button, FrontPage inserts <p> tags around the button <img> tag. Switch to Code view and remove the opening and closing <p> tags from the Interactive Button image.
  10. Repeat steps 2 through 9 to replace the text with an image for each of the five top-level menu items. When you finish, you should have five button images lined up across the page with the drop-down menus displayed beneath them.
  11. Save the page as menu.htm.
  12. Create a page in FrontPage and switch to Code view.
  13. Copy and paste the JavaScript code shown in Listing 16 (Complete JavaScript for Drop-Down Menus), replacing the code in the page.
  14. Save the file as menu.js in the same folder as the menu.htm file that you created earlier.
  15. Create a page in FrontPage and switch to Code view.
  16. Copy and paste the CSS code shown in Listing 17 (Complete External Cascading Style Sheet for Drop-Down Menus), replacing the existing code in the page.
  17. Remove or comment out the following text in the td.menuHover class. (Note that a comment in the line preceding this line tells you to remove this line when you create a drop-down menu with images.)
    background-color: lightblue;
    
    
  18. Save the file as menu.css in the same folder as the menu.htm file that you created earlier.

When you finish, preview the page in the browser and test the menus.

Code Listings for Drop-Down Menus

The following code listings are included with this article to help you create a working sample with which to start when creating your own cascading menu solution. You can copy and paste any of the following code listings into a page in FrontPage to create a working sample.

Complete HTML for the Simple Drop-Down Menu

The code for the simple drop-down menu is shown in Listing 14.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <LINK REL="StyleSheet" HREF="menu.css">
  <script language="javascript" src="menu.js"></script>
</head>

<body>

  <h1 align="center">Main Heading</h1>

  <table class="navbar" width="800">
    <tr>
      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 1</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>

      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 2</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>

      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 3</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>

      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 4</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>

      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 5</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
    </tr>
  </table>

</body>
</html>

Listing 14. Simple drop-down menu

Complete HTML for the Drop-Down Menu with Cascading Submenus

The code for the drop-down menu with cascading submenus is shown in Listing 15.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <LINK REL="StyleSheet" HREF="menu.css">
  <script language="javascript" src="menu.js"></script>
</head>

<body>

  <h1 align="center">Main Heading</h1>

  <!-- MAIN MENU START -->
  <table class="navbar" width="800">
    <tr>
      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 1</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr>

              <!-- SUBMENU 1 START -->
              <td class="menuNormal" width="154" onmouseover="expand(this);" 
              onmouseout="collapse(this);">Item 1 ...
                <div class="menuNormal" width="150">
                  <table class="menu" width="150">
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 1</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 2</a>
                    </td></tr>
                    <tr>

                    <!-- SUB SUBMENU START -->
                      <td class="menuNormal" width="154" onmouseover="expand(this);" 
                      onmouseout="collapse(this);">Subitem 3 ...
                        <div class="menuNormal" width="150">
                          <table class="menu" width="150">
                            <tr><td class="menuNormal">
                              <a href="page.htm" class="menuitem">Subitem 1</a>
                            </td></tr>
                            <tr><td class="menuNormal">
                              <a href="page.htm" class="menuitem">Subitem 2</a>
                            </td></tr>
                            <tr><td class="menuNormal">
                              <a href="page.htm" class="menuitem">Subitem 3</a>
                            </td></tr>
                            <tr><td class="menuNormal">
                              <a href="page.htm" class="menuitem">Subitem 4</a>
                            </td></tr>
                            <tr><td class="menuNormal">
                              <a href="page.htm" class="menuitem">Subitem 5</a>
                            </td></tr>
                          </table>
                        </div>
                      </td>
                    <!-- SUB SUBMENU END -->

                    </tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 4</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 5</a>
                    </td></tr>
                  </table>
                </div>
              </td>
              <!-- SUBMENU 1 END -->

            </tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr>

              <!-- SUBMENU 2 START -->
              <td class="menuNormal" width="154" onmouseover="expand(this);" 
              onmouseout="collapse(this);">Item 4 ...
                <div class="menuNormal" width="150">
                  <table class="menu" width="150">
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 1</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 2</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 3</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 4</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 5</a>
                    </td></tr>
                  </table>
                </div>
              </td>
              <!-- SUBMENU 2 END -->

            </tr>
          </table>
        </div>
      </td>
      <!-- MENU 1 END -->

      <!-- MENU 2 START -->
      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 2</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr>

              <!-- SUBMENU 3 START -->
              <td class="menuNormal" width="154" onmouseover="expand(this);" 
              onmouseout="collapse(this);">Item 2 ...
                <div class="menuNormal" width="150">
                  <table class="menu" width="150">
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 1</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 2</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 3</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 4</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 5</a>
                    </td></tr>
                  </table>
                </div>
              </td>
              <!-- SUBMENU 3 END -->

            </tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      <!-- MENU 2 END -->

      <!-- MENU 3 START -->
      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 3</p>
        <div class="menuNormal" width="155">
          <table width="155" class="menu">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      <!-- MENU 3 END -->

      <!-- MENU 4 START -->
      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 4</p>
        <div class="menuNormal" width="155">
          <table width="155" class="menu">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr>

              <!-- SUBMENU 4 START -->
              <td class="menuNormal" width="154" onmouseover="expand(this);" 
              onmouseout="collapse(this);">Item 2 ...
                <div class="menuNormal" width="150">
                  <table class="menu" width="150">
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 1</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 2</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 3</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 4</a>
                    </td></tr>
                    <tr><td class="menuNormal">
                      <a href="page.htm" class="menuitem">Subitem 5</a>
                    </td></tr>
                  </table>
                </div>
              </td>
              <!-- SUBMENU 4 END -->

            </tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      <!-- MENU 4 END -->

      <!-- MENU 5 START -->
      <td class="menuNormal" width="160" onmouseover="expand(this);" 
      onmouseout="collapse(this);">
        <p>Menu 5</p>
        <div class="menuNormal" width="155">
          <table class="menu" width="155">
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 1</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 2</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 3</a>
            </td></tr>
            <tr><td class="menuNormal">
              <a href="page.htm" class="menuitem">Item 4</a>
            </td></tr>
          </table>
        </div>
      </td>
      <!-- MENU 5 END -->

    </tr>
  </table>
  <!-- MAIN MENU END -->

</body>
</html>

Listing 15. Drop-down menu with cascading submenus

Complete JavaScript for Drop-Down Menus

All of the menu examples in this article use the same script file. The code for the menu.js file is shown in Listing 16.

Note   Be sure to save the file as "menu.js". If you use a different filename, you must change the reference to it in the Web pages for the menu examples. Otherwise, your menu will not function as shown in this article.
function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
  d.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
  d.className = "menuNormal";
}

Listing 16. JavaScript file

Complete External Cascading Style Sheet for Drop-Down Menus

Each of the HTML pages for the drop-down menus included in this article reference an external cascading style sheet named menu.css. In order for the pages and menus to display correctly, you need to include this file. The code for the menu.css file is shown in Listing 17.

Note   Be sure to save the file as "menu.css". If you use a different filename, you must change the reference to it in the Web pages for the menu examples. Otherwise, your menu will not appear as show in this article.
BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;}

P
{padding-top: 10px;
margin: 0px;}

H1
{font-size: 12pt;
font-weight: bold;
padding-top: 15px;
margin: 0;}

table.navbar
{font-size: 8pt;
margin: 0px;
padding: 0px; 
border: 0px; 
font-weight: bold;}

table.menu
{font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;}

td.menuNormal
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: white;}

td.menuHover
{padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
/*remove the following line for drop-down menu with images*/
background-color: lightblue;}

div.menuNormal
{display: none;
position: static;}

div.menuHover
{border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;}

a.menuitem:link
{text-decoration: none;
color: black;
background-color: white;
display: block;}

a.menuitem:visited
{text-decoration: none;
color: black;
background-color: white;
display: block;}

a.menuitem:hover
{text-decoration: none;
color: black;
background-color: lightblue;
display: block;}

a.menuitem:active
{text-decoration: none;
color: black;
background-color: lightblue;
display: block;}

Listing 17. External cascading style sheet

Conclusion

You can create drop-down menus in a variety of ways. This article has shown you a relatively simple drop-down menu along with some variations: cascading menus, and menus that use images. You can use the code and scripts in this article to create drop-down menus in your own Web site or modify them to create other drop-down menu effects, such as a vertical navigation bar. Whatever you do, have fun creating your own look and feel for your drop-down menus.

Additional Resources

The following additional Internet resources may help you find even more ways to create drop-down menus. In addition, you can find many more resources by doing your own Internet search on "drop-down menu."

Show:
© 2014 Microsoft