Hierarchical drop down menu

[Total: 0    Average: 0/5]

This is a DHTML menu that works in almost every web browser.

Head Code:

<script>
var ns ;
var ie ;
var n6;
var W;
function BrowserCheck() {
var b = navigator.appName
if (b=="Netscape") {this.b = "ns";ns=true;}
else if (b=="Microsoft Internet Explorer") {this.b = "ie";ie=true;}
else this.b = b
this.version = navigator.appVersion;
this.v = parseInt(this.version);
if(ns&&this.v>4){ns=false;n6=true;};
if(ns||n6){W=window.innerWidth-16}else{W=document.body.offsetWidth-20;}
}

function TreeItem(id,parid,name,link,target,image)
{
this.vname="DdMenu"+TreeItem.dmcount;
TreeItem.dmcount++;
this.image=image;
this.name=name;
this.frname="";
this.id=id;
this.parentItem=null;
this.parid=parid;
this.link=link;
this.target=target;
this.items=new Array();
this.itemCount=0;
this.Opened=true;
this.fntColor="#202080";
this.selFntColor="#4040A0";
this.fntSize=2;
this.css=null;
this.bckColor="#CCDDFF";
this.selBckColor="#FFFFFF";
this.alinkColor="#ffff00";
this.arrIm="/data/ex_823/dhtml_menu_img.gif";
this.xpos=0;
this.ypos=0;
this.selected=0;
this.height=600;
this.width=150;
this.iHeight=21;
this.imWidth=18;
this.focus=-1;
this.bSize=2;
this.tW=0;
this.tH=0;
this.bColor="#AACCFF"
this.WriteCSS = TreeItemWriteCSS;
this.Show = TreeItemShow;
this.Add = TreeItemAdd;
this.WriteDiv = TreeItemWriteDiv;
this.Get = TreeItemGet;
this.A = TreeItemA;
this.align="vert";
this.moveHandler=TreeItemMove;

this.downHandler=TreeItemDown;

this.Reset=TreeItemReset;
this.EventInit=TIEventInit;
this.Write=TreeItemWrite;
this.normText="";
this.selText=""
eval(this.vname + "=this");
}

function TreeItemGet(id)
{
if(id==this.id) return this;
for(var i=0;i<this.itemCount;i++)
{
It=this.items[i].Get(id);
if(It!=null) return It;
}
return null;
}
function TreeItemA(id,parid,name,link,target,image)
{
It=new TreeItem(id,parid,name,link,target,image);
this.Add(It);
}
function TreeItemAdd(item)
{
item.Opened=false;
It=this.Get(item.parid);
status="item got "+item.id;
if(item.parid==this.id)
{

item.width=this.width;
item.bckColor=this.bckColor;
item.selBckColor=this.selBckColor;
item.fntColor=this.fntColor;
item.fntSize=this.fntSize;
item.iHeight=this.iHeight;
item.imWidth=this.imWidth;
item.arrIm=this.arrIm;
item.selFntColor=this.selFntColor;
this.items[this.itemCount]=item;
item.parentItem=this;
item.bSize=this.bSize;
item.bColor=this.bColor;
//if(ie||n6)
item.visibility="hidden";
//if(ns)item.visibility="hide";
this.itemCount++;
return;
}
if(It!=null) {It.Add(item);return;}
}

function TreeItemWriteDiv()
{
if(this.itemCount<1) return false;
document.write("<DIV ID='"+this.vname+"'><table border='"+this.bSize+"' width='"+this.tW+"' height='"+this.tH+"' bordercolor='"+this.bColor+"' ><tr><td>");
for(var i=0;i<this.itemCount;i++)
{
ref=this.items[i].name;
im="";im1="";cl="";scl="";
cl=" color='"+this.fntColor+"'";scl=" color='"+this.selFntColor+"'";
if(this.items[i].image!="")im1="<img src='"+this.items[i].image+"' width='"+this.imWidth+"' height='"+this.iHeight+"' border=0>";
w=this.width-this.imWidth-this.iHeight;
if(this.items[i].itemCount>0&&this.arrIm!="")im="<img src='"+this.arrIm+"' height='"+this.iHeight+"' width='"+this.iHeight+"' border=0>";
this.items[i].normText="<table border='0' width='"+this.width+"' cellspacing='0' height='"+this.iHeight+"' cellpadding='0'><tr><td width ="+this.imWidth+">"+im1+"</td><td width= '"+this.width+"' ><font "+cl+" size='"+this.fntSize+"'><div id='"+this.items[i].vname+"t' >"+ref+"</div></font></td><td width="+this.iHeight+">"+im+"</td></tr></table>";
this.items[i].selText="<table border='0' width='"+this.width+"' cellspacing='0' height='"+this.iHeight+"' cellpadding='0'><tr><td width ="+this.imWidth+">"+im1+"</td><td width= '"+this.width+"' ><font "+scl+" size='"+this.fntSize+"'>"+ref+"</font></td><td width="+this.iHeight+">"+im+"</td></tr></table>";
document.write("<DIV ID='"+this.items[i].vname+"i' >");
document.write(this.items[i].normText);
document.write("</DIV>rn");
if(ie){this.items[i].ilayer=document.all[this.items[i].vname+"i"];this.items[i].tlayer=document.all[this.items[i].vname+"t"];}
if(n6){this.items[i].ilayer=document.getElementById(this.items[i].vname+"i");
this.items[i].tlayer=document.getElementById(this.items[i].vname+"t");
this.items[i].tlayer.style.color=this.items[i].fntColor;
this.items[i].tlayer.style.fontSize=6+2*this.items[i].fntSize+"pt";
};
if(ns)this.items[i].ilayer=eval("document."+this.vname+".document."+this.items[i].vname+"i");
}
document.write("</td></tr></table></DIV>rn");
for(var i=0;i<this.itemCount;i++)
{
this.items[i].WriteDiv();
}
if(ie){this.layer=document.all[this.vname];this.css=this.layer.style;}
if(n6){this.layer=document.getElementById(this.vname);this.css=this.layer.style;}
if(ns){this.layer=eval("document."+this.vname);this.css=this.layer;}
}
function TIEventInit()
{
 for(var i=0;i<this.itemCount;i++)
 {
 this.items[i].EventInit();
 }
for(var i=0;i<this.itemCount;i++){
var style=this.items[i].ilayer;
style.onmouseover=new Function(this.vname+".moveHandler("+i+");return false;");
style.onmousedown=new Function(this.vname+".downHandler("+i+");return false;");
if(ns)style.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

status="Menu inited"+this.id;
}
function TreeItemWriteCSS()
{
var dx;
var dy;
var bCol=(ns)?"layer-background-color:" : "background-color:";
if(this.align=="vert"){
Height=this.itemCount*this.iHeight+2*this.bSize;
Width=this.width+2*this.bSize;
dx=0;
dy=this.iHeight;
}else
{
Height=this.iHeight+2*this.bSize;Width=(this.width+2)*this.itemCount+2*this.bSize;
dy=0;
dx=this.width+2;
}
this.tH=Height; this.tW=Width;
if(this.itemCount>0){
if(this.parentItem==null)document.write("<STYLE TYPE='text/css'><!--");
document.write("#"+this.vname+" {position:absolute;"); 
document.write(";left:"+this.xpos+"px;top:"+this.ypos+"px;width:"+Width+"px;");
document.write("visibility: "+this.visibility+"; cursor: hand; z-index:1;}rn");
for(var i=0;i<this.itemCount;i++)
{
var nxpos=this.xpos+this.width;
var nypos=this.ypos+i*this.iHeight;
if(this.align!="vert")
{
nxpos=this.xpos+i*this.width;
nypos=this.ypos+this.iHeight;
}
if(nxpos+this.width>W) nxpos=nxpos-2*this.width;
this.items[i].xpos=nxpos;this.items[i].ypos=nypos;
 document.write("#"+this.items[i].vname+"i {position:absolute;"+bCol+this.items[i].bckColor); 
document.write(";top:"+(i*dy+this.bSize)+"px;left:"+(i*dx+this.bSize)+"px"+";width:"+this.width+"px;");
document.write("height:"+this.iHeight+"px; z-index:1;}rn");

this.items[i].WriteCSS();
}
if(this.parentItem==null)document.write("--></STYLE>rn");
}
}
function TreeItemShow(o)
{
if(this.itemCount<1) return;
this.focus=-1;
if(o==1)
{
this.css.visibility=(ns)? "show":"visible";
}
else
{
for(var i=0;i<this.itemCount;i++)this.items[i].Show(0);
this.css.visibility=(ns)? "hide":"hidden";
}
}


function TreeItemMove(i)
{
if(this.itemCount<1)return;
sel=i;
if(sel!=this.focus||sel==0)
{
this.items[this.selected].Show(0);
this.items[sel].Show(1);
if(sel!=this.focus){
var c1=this.items[this.selected].bckColor;
var c2=this.items[sel].selBckColor
if(ie||n6){
this.items[this.selected].ilayer.style.backgroundColor=c1;
this.items[sel].ilayer.style.backgroundColor=c2;
this.items[this.selected].ilayer.style.background=c1;
this.items[sel].ilayer.style.background=c2;
this.items[this.selected].tlayer.style.color=this.items[this.selected].fntColor;
this.items[sel].tlayer.style.color=this.items[sel].selFntColor;
//this.items[sel].tlayer.style.fontSize="8pt"
//for(r in this.items[sel].tlayer.style) alert(r+"="+this.items[sel].tlayer.style[r]);
}
if(ns)
{
var style=this.items[this.selected].ilayer;
var style1=this.items[sel].ilayer;
style.document.bgColor=c1;
style1.document.bgColor=c2; 
this.Write(this.selected,this.items[this.selected].normText);
this.Write(sel,this.items[sel].selText);
}

}
this.selected=sel;this.focus=sel;
}
}

function TreeItemDown(i)
{
sel=i;
if(this.items[sel].link!=""){
location.href=this.items[sel].link;
}
}
function TreeItemReset()
{
for(var i=0;i<this.itemCount;i++)this.items[i].Show(0);
this.focus=-1;
}
function TreeItemWrite(i,text)
{
if(n6||ie) this.items[i].ilayer.innerHTML=text;
if(ns){
var style=this.items[i].ilayer;
style.document.open();
style.document.write(text);
style.document.close();
}
}
TreeItem.dmcount=0;



function MenuBuild()//Building and configuring menu
{

is = new BrowserCheck()//Checking browser version
TE=new TreeItem(0,0,"items2","","");//creating menu object
TE.xpos=150;TE.ypos=55;//x and y position
TE.align="hor";//alignment "vert" - vertical "hor" - horizontal
TE.width=150;//column width
TE.fntSize="2";//font size
TE.iHeight=20;//item height
TE.imWidth=20;//icon image width
/*
TE.bckColor="#FFFFFF";//back color
TE.selBckColor="#FFEEEE";//back coloro for selected items
TE.fntColor="#202060";//font color
TE.selFntColor="#4040A0";//font color for selected items
TE.bSize=2;//border width
TE.bColor="#00A000";//border color
*/

// inserting items into menu

//A(ItemID,ParentID,"title",URL,icon URL);
TE.A(1,0,"About","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(2,0,"Products ","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(3,0,"Services ","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(7,0,"E-mail","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(4,0,"Forum","","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(5,1,"Stuff","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(6,1,"Goals","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(8,2,"JavaScript","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(9,2,"JSP beans","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(11,8,"Tree menu","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(12,8,"Drop Down menu","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(14,9,"file uploader","/","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(15,9,"charts","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(16,9,"flash","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(17,3,"Support","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(18,3,"Component","","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(19,3,"Developing","","","/data/ex_823/dhtml_menu_doc.gif");

TE.WriteCSS();
TE.WriteDiv();
TE.Reset();
}
function MenuInit()//Inits menu Events
{
TE.EventInit();
}
function Reset()//Reseting menu
{
TE.Reset();
}
</script>

Body Code:

<script language="JavaScript">
<!--
function MenuBuild()//Building and configuring menu
{

is = new BrowserCheck()//Checking browser version
TE=new TreeItem(0,0,"items2","","");//creating menu object
TE.xpos=150;TE.ypos=30;//x and y position
TE.align="hor";//alignment "vert" - vertical "hor" - horizontal
TE.width=120;//column width
TE.fntSize="2";//font size
TE.iHeight=20;//item height
TE.imWidth=20;//icon image width

// inserting items into menu

//A(ItemID,ParentID,"title",URL,icon URL);
TE.A(1,0,"About EFW","#about_efw","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(2,0,"News","#news","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(3,0,"Products","#products","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(4,0,"Organization","#organization","","/data/ex_823/dhtml_menu_fold.gif");
TE.A(5,0,"Career","#career","","/data/ex_823/dhtml_menu_fold.gif");

TE.A(6,1,"EFW Profile","#about1","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(7,1,"<nobr>Mission</nobr>","#about2","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(8,1,"Core Values","#about3","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(12,1,"EFW History","#about7","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(13,2,"<nobr>Latest</nobr>","#latest_news","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(14,2,"<nobr>Archives</nobr>","#archives","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(15,3,"Ground Sys","#prod1","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(16,3,"Airborne","#prod2","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(17,3,"Helmet","#prod3","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(18,16,"OH58D","#oh58d","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(19,16,"V22","#v22","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(20,16,"A10","#a10","","/data/ex_823/dhtml_menu_doc.gif");


TE.A(21,4,"Engineering","#eng","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(22,4,"Manufacturing","#manf","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(23,4,"Procurement","#proc","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(24,21,"Hardware","#hw","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(25,21,"Software","#sw","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(26,21,"Systems","#sy","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(27,21,"Test","#tst","","/data/ex_823/dhtml_menu_doc.gif");

TE.A(28,5,"Why EFW","#why","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(29,5,"Openings","#open","","/data/ex_823/dhtml_menu_doc.gif");
TE.A(30,5,"Benifits","#benif","","/data/ex_823/dhtml_menu_doc.gif");


TE.WriteCSS();
TE.WriteDiv();
TE.Reset();
}
function MenuInit()//Inits menu Events
{
TE.EventInit();
}
function Reset()//Reseting menu
{
TE.Reset();
}
MenuBuild();
MenuInit();
//-->
</script>
<table class=header border=0 cellpadding=0 cellspacing=0 width=750>
<tr>
<td class=head_td width=150><a href="/"><img height="40px" src="/images/red_ball0.gif"></a></td>
<td class=head_td width=120><a href="#">About EFW</a></td>
<td class=head_td width=120><a href="#">News</a></td>
<td class=head_td width=120><a href="#">Products</a></td>
<td class=head_td width=120><a href="#">Organization</a></td>
<td class=head_td width=120><a href="#">Careers</a></td>
</tr>
</table>
<table class=main border=0 width=750 cellpadding=0 cellspacing=0>
<tr class=main>
<td height=400>MAIN</td>
</tr>
</table>
<table class=footer border=0 width=750 cellpadding=0 cellspacing=0>
<tr>
<td class=foot_td width=120><a href="#">Gallery</a></td>
<td class=foot_td width=120><a href="#">Contact</a></td>
<td class=foot_td width=120><a href="#">SiteMap</a></td>
<td class=foot_td width=120><a href="#">Legal Link</a></td>
<td class=foot_td align=right><form name=search action="#"><input type=text class=search size=15 value="SEARCH" onblur="if(this.value=='')this.value='SEARCH'" onfocus="this.value=''"><img class=search height=20 src="/images/blue_ball0.gif"></td>
</tr>
</table>
</form>
<HR>
This code should be put into the body tag like this:<BR>
<body onMouseDown="Reset()">

Times Viewed: 9

Leave a Reply

Your email address will not be published. Required fields are marked *