DHTML Lab: Hierarchical Menus, III; Frames - The Frameset | WebReference

DHTML Lab: Hierarchical Menus, III; Frames - The Frameset

home / experts / dhtml / column18

Hierarchical Menus in Frames
defining the problem

The Frameset Limitations

As we know, frames are windows. Content cannot overlap frame boundaries. We therefore need to develop a technique where the links that activate the menus are in a navigation frame, and the menus themselves reside in a main frame that holds the document proper.

Our first inclination is to have the main frame create the menus and have them references by the navigation frame. This approach, although it works fine, is not very elegant. What we are striving for is a technique where the navigation frame, common to all main frame content, controls the creation of menus, and creates them whenever a new main frame document is loaded. We need to keep the number of pages that we will modify, and the modifications, themselves, to a minimum.

We will include all the code necessary in our navigation frame, which is loaded once and accessible to all other pages. Documents loaded into the main frame will have one line of code added, only.

The Style Limitations

The other major problem we will overcome is that of styles, especially where Navigator is concerned. Since all our code is in the navigation frame, how do we transport styles to the main frame, to style our menus? The answer is based on the much-maligned and unfairly-overlooked powerful JavaScript Style Sheets! In Explorer, we can style our menus dynamically, after creation, so styles are not a problem.

The Frameset Document

First off, we need a frameset. The navigation frame can be either on the left or the top. In the case of the example code, it is on the left.

Note: It is highly recommended that you keep your frameset to the naming scheme used below. Otherwise, several modifications will have to be made to the code discussed. The navigation frame is given a NAME of nav, while the main frame is called main:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="145,*" FRAMEBORDER=0 BORDER=0>
    <FRAME NAME="nav"
           SRC="yourNAVpage.html"
           SCROLLING=NO MARGINHEIGHT=0 MARGINWIDTH=0>
    <FRAME NAME="main"
           SRC="yourFirstMainPage.html">
</FRAMESET>
</HTML>

That's all we need in the frameset. The bulk of the work is performed in the navigation frame.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Apr. 08, 1998
Revised: Apr. 08, 1998

URL: http://www.webreference.com/dhtml/column18/menuFrIntro.html