DHTML Lab: Hierarchical Menus, III; Frames - The Complete Code 1/3 | WebReference

DHTML Lab: Hierarchical Menus, III; Frames - The Complete Code 1/3

home / experts / dhtml / column18
Logo

  Hierarchical Menus in Frames
  SPECIAL EDITION; the director's cut 1/3

Code highlighted in bold purple is new to the frameset adaptation of the script.

The FRAMESET document

It is highly recommended that you name your navigation frame nav and the main frame 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>

The Navigation Frame

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
   NS4 = (document.layers) ? 1 : 0;
   IE4 = (document.all) ? 1 : 0;
  ver4 = (NS4 || IE4) ? 1 : 0;   
 isMac = (navigator.appVersion.indexOf("Mac") != -1) ? 1 : 0;
isMenu = (NS4 || (IE4 && !isMac)) ? 1 : 0;
function popUp(){return};
function popDown(){return};
function startIt(){return}
if (!ver4) event = null;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
    menuWidth = 120;
    childOverlap = 50;
    childOffset = 5;
    perCentOver = null;
    secondsVisible = .5;
    fntCol = "black";
    fntSiz = "12px";
    fntWgh = "normal";
    fntSty = "normal";
    fntFam = "sans-serif";
    backCol = "#DDDDDD";
    overCol = "#FFCCCC";
    overFnt = "black";
    linHgt = "normal";
    borWid = 2;
    borCol = "MediumSlateBlue"
    borSty = "outset";
    imgSrc = "triangle.gif";
    imgSiz = 10;
    overFnt = "purple"
    isLeftNav = true;
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierFrames.js'><\/SCRIPT>");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
.
. other HTML
.
<A HREF="/"
   onMouseOver="popUp('elMenu1',event)"
   onMouseOut="popDown('elMenu1')">Webreference</A>
<A HREF="/index2.html"
   onMouseOver="popUp('elMenu2',event)"
   onMouseOut="popDown('elMenu2')">Contents</A>
.
. other HTML
.
</BODY>

The Main Frame

All pages loaded into the main frame must have this event handler added to the BODY tag.

<BODY onLoad="if(parent.frames.nav && parent.frames.nav.startIt)parent.frames.nav.startIt()">

The next page lists the menu arrays.


Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column18/allCode1.html