DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); The Complete Code 1/3 | WebReference

DHTML Lab: Hierarchical Menus Ver. 2 (Cross-Browser/Frames); The Complete Code 1/3


Logo

  Hierarchical Menus Ver. 2 (Cross-Browser/Frames)
  SPECIAL EDITION; the director's cut 1/3

The FRAMESET document

If you choose to have hierarchical menus in a frameset, create a frameset as you normally would.

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 In-Page Script/HTML

If you are using a frameset, this HTML and script should be included in your navigation page.
If using a full-window, insert in the page that displays the menus.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
   NS4 = (document.layers);
   IE4 = (document.all);
  ver4 = (NS4 || IE4);   
 isMac = (navigator.appVersion.indexOf("Mac") != -1);
isMenu = (NS4 || (IE4 && !isMac));
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 = "blue";
    fntSiz = "10";
    fntBold = false;       // Boolean for bold
    fntItal = false;       // ...or italic text
    fntFam = "sans-serif";
    
    backCol = "#DDDDDD";
    overCol = "#FFCCCC";
    overFnt = "purple";
    
    borWid = 2;
    borCol = "black";
    borSty = "solid";     // ignored by NS4
    itemPad = 3;          // pixel value
    
    imgSrc = "tri.gif";
    imgSiz = 10;
    
    separator = 1;        // pixel value
    separatorCol = "red"; // color ignored by NS4
    
    isFrames = false;     // using frameset?
    navFrLoc =  "left";   // where is the nav frame?
    mainFrName = "main";  // name of the main frame?
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierMenus.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 - (OPTIONAL)

If you are using a frameset, you can create your menus upon page load
by including this event handler in the the main frame page.

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

The next page lists an example of menu arrays.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 22, 1998
Revised: June 11, 1998

URL: http://www.webreference.com/dhtml/column20/allCode1.html