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.
|
