DHTML Lab: Hierarchical Menus, III; Frames

This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 and Internet Explorer 4 for Windows.

The hierarchical menus developed in column 14 and column 15, have proven to be a huge success. The most oft-asked question since then has been: How do I get the menus to work in a frameset?

Pass your mouse over the links in the left frame. The menus will appear in the main frame. Scroll the main frame and try again. The menus again appear in the correct position. This is the technique that we'll discuss in the present column.

Prerequisites

1. An understanding of the concept of frames, the HTML required to create them and the JavaScript frame referencing standard. To refresh your knowledge, you may read Dan Brown's Framing the Web, here at WebReference.

2. Familiarity with the Cross-Browser Hierarchical Menus script, developed in column 14 and column 15. The present column will deal only with the adaptation of that script to pages contained in frames. The complete script, however, will be repeated for reference.

In This Column

We will discuss:

• creating the frameset document
• the navigation frame script
• the menu arrays
• dynamically generating JavaScript stylesheet
• creating positioned elements on-the-fly in a different frame
• page positioning based on page scroll
• the main frame code

For the first time, in our columns, we will learn:

• to script the onload and onunload event handlers for frames and framesets
• how to use JavaScript Style Sheets
• how to create positioned elements in another frame
• how to script for an event in a different frame