DHTML Menu Builder - Using Frames
Note: In HTML Editor version 2009 and higher, the DHTML Menu Builder has been replaced with the CSS Menu Designer. To upgrade to the latest version of the HTML Editor, download it from your Orders and Downloads page. For more information about the CSS Menu Designer, read How to Use the CSS Menu Designer.
Adding a DHTML menu to a frames-based layout can be tricky, especially if you're not familiar with the way frames are structured. If you're new to HTML or unsure of your ability to use frames properly, you may want to check out this tutorial.
The key issue here is consistency 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's sake, we will outline the use of the DHTML Menu Builder in a two-frame horizontal 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">
<noframes>
<body>
</body>
</noframes>
</frameset>
menu.html is a separate HTML page that contains the code generated by the DHTML Menu Builder. The navigation frame links to this page. The main.html part is the homepage, and the main target frame links to it. Pages opened by links from the navigation frame 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 this:
<body onload="javascript:{if(parent.frames[0]&&parent.frames['navigation'].Go)parent.frames['navigation'].Go()}">
If you don't include this script, things will get ugly.
The next step is to change the variables to accommodate targeted links. In the DHTML Menu Builder 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
Check out the commented-out explanations for an idea of what this all means. 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 appearThe menu will now appear in the navigation frame, and all links will open in the main frame. If you want the submenus to open in the main frame then make sure the variable var SecLineFrame equals main.
Rate This Article
You must be logged in to rate articles.
