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.
οnmοuseοver = "expand (this);" οnmοuseοut = "collapse (this);"> menu 1 p> ... [Missing Div ELEMENT] td> Listing 2. Drop-down menu TD element The width attribute of each TD element is set to 160 pixels, so that each menu accounts for 20% of the total width of the table. If you want to add or delete a menu or change the width of the table, you must adjust the width of each menu in the table. For example, if you want to delete one of the columns in this example so that you have 4 columns, for a menu of 800 pixels wide, the width of each menu must be 200 pixels. If you want to add a menu so that you have 6 columns, this width must be approximately 133 pixels, and so on. Each drop-down menu is included in a DIV element, and the DIV element is nested in each top-level TD element. In this DIV element, the code for each drop-down menu is included in a nested table element. Listing 3 shows the nested DIV and drop-down menu tables.
|