Tell a Friend About Our Cool Software
Setting up the DHTML Menu Builder in frames can be tricky, especially if you're not familiar with the way frames are structured. If you're new to HTML or unsure of you're ability to use frames properly,
The key issue here is consistancy in using and naming your frame "name" values. If this last sentence was intimidating, it's not too late to read this great tutorial!
For simplicity, we will outline the use of the DHTML Menu Builder in a two-frame horizontal framed page. We'll start with a frameset that looks like this:
</head>
<frameset rows="20%,*" border="0">
<frame name="navigation" src="menu.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0" noresize>
<frame name="main" src="main.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
<body>
The "menu.html" contains the code generated by the aptly named DHTML Menu Builder, it resides in the "navigation" frame. The "main.html" contains the homepage in the "main" target frame. Pages opened by links from the DHTML Menu will open in the "main" frame.
Every page that loads in the "main" frame must have the following script in the <body> tag:
Onload="javascript:{if(parent.frames[0]&&parent.frames['MyFrameOne'].Go)parent.frames['MyFrameOne'].Go()}"
Replace MyFrameOne with the name of the navigation frame. So our example looks like:
<body onload="javascript:{if(parent.frames[0]&&parent.frames['navigation'].Go)parent.frames['navigation'].Go()}">
If this script is not here, things will get ugly.
The next step is to change the variables to accomodate targeted links. In the DHTML Menu code, right under the part that says "YOU CAN MANUALLY CHANGE THE MENU HERE, BUT BE VERY CAREFUL", find these variables:
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='navig'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
The explanations here should be self-evident. To continue our example, the variables should appear like this:
var FirstLineFrame='navigation'; // Frame where first level appears
var SecLineFrame='navigation'; // Frame where sub levels appear
var DocTargetFrame='main'; // Frame where target documents appear
The menu will now appear in the "navigation" frame, and all links will open in the "main" frame. If you want the submenus of the menu to open in the "main" frame then make sure the variable var SecLineFrame equals "main".
Click here to see an example and see how it all comes together. Go ahead and view the source code or save the pages to your hard drive for reference.