| home / experts / dhtml / column43 |
|
This is a sample HTML Page that includes three menu trees (LoadMe.html in the download.) The top-level menus can be permanently visible or popup. The browser detection allows for the page to be used by old browsers and without menus. The Page Parameters are optional and override Global settings set in the external script.
View this page in a new window.
<HTML>
<HEAD>
<TITLE>HM Version 4 Examples</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
/***************************************************************************
BROWSER DETECTION
***************************************************************************/
HM_DOM = (document.getElementById) ? true : false;
HM_NS4 = (document.layers) ? true : false;
HM_IE = (document.all) ? true : false;
HM_IE4 = HM_IE && !HM_DOM;
HM_Mac = (navigator.appVersion.indexOf("Mac") != -1);
HM_IE4M = HM_IE4 && HM_Mac;
HM_IsMenu = (HM_DOM || HM_NS4 || (HM_IE && !HM_IE4M));
function popUp(){return};
function popDown(){return};
function startIt(){return}
if(!HM_IsMenu) event = null;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
/***************************************************************************
IN-PAGE PARAMETERS
***************************************************************************/
HM_PG_MenuWidth = 150;
HM_PG_FontFamily = "Arial,sans-serif";
HM_PG_FontSize = 10;
HM_PG_FontBold = false;
HM_PG_FontItalic = false;
HM_PG_FontColor = "blue";
HM_PG_FontColorOver = "white";
HM_PG_BGColor = "#DDDDDD";
HM_PG_BGColorOver = "#FFCCCC";
HM_PG_ItemPadding = 3;
HM_PG_BorderWidth = 2;
HM_PG_BorderColor = "black";
HM_PG_BorderStyle = "solid";
HM_PG_SeparatorSize = 2;
HM_PG_SeparatorColor = "black";
HM_PG_ImageSrc = "tri.gif";
HM_PG_ImageSize = 5;
HM_PG_ImageHorizSpace = 0;
HM_PG_ImageVertSpace =0;
HM_PG_KeepHilite = true;
HM_PG_ClickStart = 0;
HM_PG_ClickKill = true;
HM_PG_ChildOverlap = 20;
HM_PG_ChildOffset = 10;
HM_PG_ChildPerCentOver = null;
HM_PG_TopSecondsVisible = .5;
HM_PG_StatusDisplayBuild =1;
HM_PG_StatusDisplayLink = 1;
HM_PG_UponDisplay = null;
HM_PG_UponHide = null;
HM_PG_RightToLeft = false;
//HM_a_TreesToBuild = [];
//-->
</SCRIPT>
</HEAD>
<BODY>
<STYLE TYPE="text/css">
#two{position:absolute;left:50;top:50}
#one{position:absolute;left:50;top:150}
#three{position:absolute;left:50;top:300}
</STYLE>
<H3>Sample HTML page with 3 Hierarchical Menus</H3>
<DIV ID=two>Permanent Menu:</DIV>
<DIV ID=one><A HREF="javascript:void(0)" onMouseOver="popUp('elMenu1',event)" onMouseOut="popDown('elMenu1')" onClick="return false">Relative-to-Mouse-Position Popup Menu</A></DIV>
<DIV ID=three><A HREF="javascript:void(0)" onMouseOver="popUp('HM_Menu3',event)" onMouseOut="popDown('HM_Menu3')" onClick="return false">Absolute Position Popup Menu</A></DIV>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if(HM_IsMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierArrays.js' TYPE='text/javascript'><\/SCRIPT>");
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
if(HM_IsMenu) {
document.write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='hierMenus.js' TYPE='text/javascript'><\/SCRIPT>");
}
//-->
</SCRIPT>
</BODY>
</HTML>
On the next page, the new 4.0 arrays.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: Dec 29, 2000
Revised: Dec 29, 2000
URL: http://www.webreference.com/dhtml/column43/2.html
