Create a FrontPage drop-down menu using JavaScript

xiaoxiao2021-03-06  43

Create a FrontPage drop-down menu using JavaScript

Release Date: 1/28/2005

| Update Date: 1/28/2005

Lisa WollInmicrosoft Corporation

Applicable to: Microsoft Office FrontPage 2003Microsoft FrontPage 2002MICROSoft FrontPage 2000

Summary: When you browse on the Internet, you are using a variety of type drop-down menu everywhere, but if you try to create a type of drop-down menu, you will not be very simple. This article explains the scripts and styles required to create your own drop-down menu.

This page

Drop-down menu Introduction Create a simple drop-down menu Simple drop-down menu Change form drop-down menu code list Summary Other resources

Drop-down menu

Almost every site on the Internet exists some kind of drop-down menu. You may find that a simple drop-down menu will be arranged at the top of the web page, complex sequential submenu, some of which uses a graphic with mouse to stay, and some vertical arrangements on the left or right side of the web page . If you want to use the drop-down menu in your own website, this article will help when you start actions, and will explain some of the mysterious features that look more mysterious.

Most drop-down menus use dynamic HTML (DHTML) to create special display / hidden behavior. All DHTMLs get its special features from a combination of client scripts and CSS styles. Usually, this means that when a user performs an action, the event in the browser is triggered, causing the browser to run a script to change one or more elements display properties.

This article tells three different variations of the drop-down menu. You can create your own drop-down menu using the examples in this article. The first example is a simple drop-down menu. Other two drop-down menu examples are the first example of the modified form: one has a cascade menu, another use image.

Note The code in the Code List section is at the end of this article. For the third example, explain one of the other two examples.

All drop-down menu examples in this article can run normally in Microsoft Internet Explorer 5.0 or later. Simple drop-down menu examples and drop-down menu examples with images can also run in Opera, Mozilla, and Netscape browsers. Cascaded drop-down menu example can run in the Internet Explorer and Opera, but not in Mozilla or Netscape browser.

In addition, the HTML examples in this article use the following DOCTYPE. If you specify a different DOCTYPE, the code may not be able to run in accordance with expected or hope. In this case, you may need to make changes to the code to run normal with different DOCTYPE. (For more information, see Working with HTML DOCTYPE DECLARATIONS IN FrontPage.)

Back to top

Create a simple drop-down menu

This simple drop-down menu example will generate a horizontal menu at the upper part of the web page. When the user points the mouse pointer to each menu item, the browser displays a downlink list item. Figure 1 shows the way the menu is displayed in Internet Explorer.

Figure 1. Simple drop-down menu

The following sections describe the HTML, JavaScript, and CSS code required to create this drop-down menu. You will find the full code listed in this code list below this article.

Note The HTML, script objects, properties, methods, events, and CSS properties of this article are not within the scope of this article. For more information on these topics, see the HTML and Dynamic HTML reference in the Web Development section in MSDN Library. Simple drop-down menu HTML code

The drop-down menu is created using the table. This menu is relatively simple, as shown in the list 1.

... [Missing TD Elements]

List 1. Main menu bar table

The menu table has a Class property of a value of "Navbar", which is related to a named style class, and the width property is set to a fixed pixel metric: 800. (If you specify a different metric or percentage, you may need to change the metrics of each column in the table, which may change the behavior of the menu in the browser. For more information, see Class Attribute | ClassName Property and Width Attribute | width property.)

The table is composed of TR Element | TR Object, which includes a plurality of columns (TD Element | TD OBJECT). The examples in this article provide five columns, each with a drop-down menu. Each drop-down menu is located within a TD element in this menu table.

The code in the TD element uses the ONMOUSEOVER and the ONMOUSEOUT event to provide the correct display and hidden features of the drop-down menu. (For more information, see the OnMouseOver Event and OnMouseout Event.) List 2 shows the code of the drop-down menu TD element. To ensure that the menu is easy to use, the code for each drop-down menu is exactly the same.