Drop Down Menu: Help Needed

Evolke · October 20, 2008

Im struggling with a code. I'd like to have a menu that drops down when the mouse is hovered over it. I've found a website with the Tutorial as to what I want, but I'm finding myself completely lost. Whats confusing me is the positioning of codes. Im not understanding where the code needs to be put to work. Nor am I understanding the explaination for sections of the code and what it does.

This is the Link to the Tutorial Website: http://forums.xisto.com/no_longer_exists/

If you can help me, please do!
Thanks in advance

xpress · October 20, 2008

OK. I will explain it with this following code only( The code in your reference website)
The following code is part of the body.

<ul id="cssdropdown"><li class="headlink">	<a href="mine.html?search_engines">Search Engines</a>	 <ul>	  <li><a href="http://google.com/">Google</a></li>	  <li><a href="http://yahoo.com/">Yahoo</a></li>	  <li><a href="http://live.com/">Live Search</a></li>	 </ul>	 </li>	  <li class="headlink">	  <a href="mine.html?shopping">Shopping</a>		 <ul>	  <li><a href="http://amazon.com/">Amazon</a></li>	  <li><a href="http://ebay.com/">eBay</a></li>	  <li><a href="http://craigslist.com/">CraigsList</a></li>	 </ul> </li></ul>

This code should be placed in the body of your page.
That is between <body></body> tags. You can place it anywhere in the body, as per your needs. This is just for testing.

Next code is Cascading Style Sheet(CSS) code.
This must be placed between the <style> </style> tags. These style tags should placed in the head part.
So paste this code between <head> and </head> tags.

<style type="text/css">	li.headlink ul { display: none; }	li.headlink:hover ul { display: block; }</style>

Now save the page, and open it with browser like firefox and you will see the drow down menu(very simple, you need to customize it, if you want a professional look).

But, the above code won't work in Internet Explorer. So you need to write a java script code to make it work in
Internet Explorer. That is the third part of the code given in that website.

The javascript also will be placed in between <head> tags.
Use the following code

<script type="text/javascript>  window.onload = function(){	   var lis = document.getElementsByTagName('li');	   for(i = 0; i < lis.length; i++)	   {	 	var li = lis[i];		if (li.className == 'headlink')		{					li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }			li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }		}	}}</script>

and place this code between the <head> and </head> tags along with CSS code.

So, the code of the page looks like this.

<html>   <head>	   <script type="text/javascript>		  write your javascript code here.	   </script>	   <style type="text/css">		  write your  CSS code here	   </style>   </head>   <body>	  <!-- your body part of code -->   </body></html>

Now you will see a drop down menu that will work in all browsers.
Hope you understand the explanation, if these are the details you want. If not, post your question in detail and I will explain it.
Edited October 20, 2008 by xpress (see edit history)

rpgsearcherz · October 20, 2008

Thank you to both of you. I've actually been wondering how to do something like this for my site as well. Would it be possible to have the bar come out to the side? My navigation bar is on the left side of my site, so I would need a drop-side bar instead.

veerumits · October 20, 2008

i have code in java script you can use it

Here have three file with name

1) exmplmenu_var2.js

2) menu_com.js

3) Header.htm

use these file to make drop down menu.only change are required in exmplemenu_var2.js and Header.htmmenu_com.js. file please dont make change in middle file

File Name :exmplmenu_var2.js

var LowSubBgColor='ACE5AA';

var HighBgColor='blue';

var HighSubBgColor='blue';

var FontLowColor='ffffff';

var FontSubLowColor='1E2B70';

var FontHighColor='ffffff';

var FontSubHighColor='#997787';

var BorderColor='blue';

var BorderSubColor='black';

var BorderWidth=1;

var BorderBtwnElmnts=1;

var FontFamily="Verdana, Arial, Helvetica, sans-serif"

var FontSize=8;

var FontBold=1;

var FontItalic=0;

var MenuTextCentered='left';

var MenuCentered='center';

var MenuVerticalCentered='top';

var ChildOverlap=0;

var ChildVerticalOverlap=0;

var StartTop=90;

var StartLeft=0;

var VerCorrect=0;

var HorCorrect=0;

var LeftPaddng=2;

var TopPaddng=1;

var FirstLineHorizontal=1;

var MenuFramesVertical=1;

var DissapearDelay=1000;

var TakeOverBgColor=1;

var FirstLineFrame='navig';

var SecLineFrame='space';

var DocTargetFrame='space';

var TargetLoc='';

var HideTop=0;

var MenuWrap=1;

var RightToLeft=0;

var UnfoldsOnClick=0;

var WebMasterCheck=0;

var ShowArrow=0;

var KeepHilite=1;

var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10];

function BeforeStart(){return}

function AfterBuild(){return}

function BeforeFirstOpen(){return}

function AfterCloseAll(){return}

Menu1=new Array("Home","home.jsp","",0,20,125);

Menu2=new Array("Department","","",3,20,125);

Menu2_1=new Array("Placement","showstud.jsp","",0,20,150);

Menu2_2=new Array("Faculty","faculty.jsp","",0,20,150);

Menu2_3=new Array("Student Donation ","adonation.jsp","",0,20,150);

<b> linenums:0'></b> var NoOffFirstLineMenus=2; var LowBgColor='#685776'; var LowSubBgColor='ACE5AA'; var HighBgColor='blue'; var HighSubBgColor='blue'; var FontLowColor='ffffff'; var FontSubLowColor='1E2B70'; var FontHighColor='ffffff'; var FontSubHighColor='#997787'; var BorderColor='blue'; var BorderSubColor='black'; var BorderWidth=1; var BorderBtwnElmnts=1; var FontFamily="Verdana, Arial, Helvetica, sans-serif" var FontSize=8; var FontBold=1; var FontItalic=0; var MenuTextCentered='left'; var MenuCentered='center'; var MenuVerticalCentered='top'; var ChildOverlap=0; var ChildVerticalOverlap=0; var StartTop=90; var StartLeft=0; var VerCorrect=0; var HorCorrect=0; var LeftPaddng=2; var TopPaddng=1; var FirstLineHorizontal=1; var MenuFramesVertical=1; var DissapearDelay=1000; var TakeOverBgColor=1; var FirstLineFrame='navig'; var SecLineFrame='space'; var DocTargetFrame='space'; var TargetLoc=''; var HideTop=0; var MenuWrap=1; var RightToLeft=0; var UnfoldsOnClick=0; var WebMasterCheck=0; var ShowArrow=0; var KeepHilite=1; var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; function BeforeStart(){return} function AfterBuild(){return} function BeforeFirstOpen(){return} function AfterCloseAll(){return} Menu1=new Array("Home","home.jsp","",0,20,125); Menu2=new Array("Department","","",3,20,125); Menu2_1=new Array("Placement","showstud.jsp","",0,20,150); Menu2_2=new Array("Faculty","faculty.jsp","",0,20,150); Menu2_3=new Array("Student Donation ","adonation.jsp","",0,20,150); <b>

2) File Name :menu_com.js

</b>	 var AgntUsr=navigator.userAgent.toLowerCase();	 var DomYes=document.getElementById?1:0;	 var NavYes=AgntUsr.indexOf('mozilla')!=-1&&AgntUsr.indexOf('compatible')==-1?1:0;	 var ExpYes=AgntUsr.indexOf('msie')!=-1?1:0;	 var Opr=AgntUsr.indexOf('opera')!=-1?1:0;	 var DomNav=DomYes&&NavYes?1:0;	  var DomExp=DomYes&&ExpYes?1:0;	 var Nav4=NavYes&&!DomYes&&document.layers?1:0;	 var Exp4=ExpYes&&!DomYes&&document.all?1:0;	 var PosStrt=(NavYes||ExpYes)&&!Opr?1:0; 	 var FrstLoc,ScLoc,DcLoc;	 var ScWinWdth,ScWinHght,FrstWinWdth,FrstWinHght;	 var ScLdAgainWin;	 var FirstColPos,SecColPos,DocColPos;	 var RcrsLvl=0;	 var FrstCreat=1,Loadd=0,Creatd=0,IniFlg,AcrssFrms=1;	 var FrstCntnr=null,CurrntOvr=null,CloseTmr=null;	 var CntrTxt,TxtClose,ImgStr;	 var Ztop=100;	 var ShwFlg=0;	 var M_StrtTp=StartTop,M_StrtLft=StartLeft;	 var StaticPos=0;	 var LftXtra=DomNav?LeftPaddng:0;	 var TpXtra=DomNav?TopPaddng:0;	 var M_Hide=Nav4?'hide':'hidden';	 var M_Show=Nav4?'show':'visible';	 var Par=parent.frames[0]&&FirstLineFrame!=SecLineFrame?parent:window;	 var Doc=Par.document;	 var Bod=Doc.body;	 var Trigger=NavYes?Par:Bod; 	 MenuTextCentered=MenuTextCentered==1||MenuTextCentered=='center'?'center':MenuTextCentered==0||MenuTextCentered!='right'?'left':'right';	 WbMstrAlrts=["Item not defined: ","Item needs height: ","Item needs width: "]; 	 if(Trigger.onload)Dummy=Trigger.onload;	 if(DomNav&&!Opr)Trigger.addEventListener('load',Go,false);	 else Trigger.onload=Go;  function Dummy(){return}  function CnclSlct(){return false}  function RePos(){	 FrstWinWdth=ExpYes?FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;	 FrstWinHght=ExpYes?FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;	 ScWinWdth=ExpYes?ScLoc.document.body.clientWidth:ScLoc.innerWidth;	 ScWinHght=ExpYes?ScLoc.document.body.clientHeight:ScLoc.innerHeight;	 if(MenuCentered=='justify'&&FirstLineHorizontal){		 FrstCntnr.style.width=FrstWinWdth;		 ClcJus();		 var P=FrstCntnr.FrstMbr,W=Menu1[5],i;		 for(i=0;i<NoOffFirstLineMenus;i++){P.style.width=W;P=P.PrvMbr}}	 StaticPos=-1;	 if(TargetLoc)ClcTrgt();	 if(MenuCentered)ClcLft();	 if(MenuVerticalCentered)ClcTp();	 PosMenu(FrstCntnr,StartTop,StartLeft)}  function UnLoaded(){	 if(CloseTmr)clearTimeout(CloseTmr);	 Loadd=0; Creatd=0;	 if(HideTop){		 var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;		 FCStyle.visibility=M_Hide}}  function ReDoWhole(){	 if(ScWinWdth!=ScLoc.innerWidth||ScWinHght!=ScLoc.innerHeight||FrstWinWdth!=FrstLoc.innerWidth||FrstWinHght!=FrstLoc.innerHeight)Doc.location.reload()}  function Check(WMnu,NoOf){	 var i,array,ArrayLoc;	 ArrayLoc=parent.frames[0]?parent.frames[FirstLineFrame]:self;	 for(i=0;i<NoOf;i++){		 array=WMnu+eval(i+1);		 if(!ArrayLoc[array]){WbMstrAlrt(0,array); return false}		 if(i==0){	if(!ArrayLoc[array][4]){WbMstrAlrt(1,array); return false}			 if(!ArrayLoc[array][5]){WbMstrAlrt(2,array); return false}}		 if(ArrayLoc[array][3])if(!Check(array+'_',ArrayLoc[array][3])) return false}	 return true}  function WbMstrAlrt(No,Xtra){	 return confirm(WbMstrAlrts[No]+Xtra+'   ')}  function Go(){	 Dummy();	 if(Loadd||!PosStrt)return;	 BeforeStart();	 Creatd=0; Loadd=1;	 status='Building menu';	 if(FrstCreat){		 if(FirstLineFrame =="" || !parent.frames[FirstLineFrame]){			 FirstLineFrame=SecLineFrame;			 if(FirstLineFrame =="" || !parent.frames[FirstLineFrame]){				 FirstLineFrame=SecLineFrame=DocTargetFrame;				 if(FirstLineFrame =="" || !parent.frames[FirstLineFrame])FirstLineFrame=SecLineFrame=DocTargetFrame=''}}		 if(SecLineFrame =="" || !parent.frames[SecLineFrame]){			 SecLineFrame=DocTargetFrame;			 if(SecLineFrame =="" || !parent.frames[SecLineFrame])SecLineFrame=DocTargetFrame=FirstLineFrame}		 if(DocTargetFrame =="" || !parent.frames[DocTargetFrame])DocTargetFrame=SecLineFrame;		 if(WebMasterCheck){	if(!Check('Menu',NoOffFirstLineMenus)){status='build aborted';return}}		 FrstLoc=FirstLineFrame!=""?parent.frames[FirstLineFrame]:window;		 ScLoc=SecLineFrame!=""?parent.frames[SecLineFrame]:window;		 DcLoc=DocTargetFrame!=""?parent.frames[DocTargetFrame]:window;		 if (FrstLoc==ScLoc) AcrssFrms=0;		 if (AcrssFrms)FirstLineHorizontal=MenuFramesVertical?0:1;		 FrstWinWdth=ExpYes?FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;		 FrstWinHght=ExpYes?FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;		 ScWinWdth=ExpYes?ScLoc.document.body.clientWidth:ScLoc.innerWidth;		 ScWinHght=ExpYes?ScLoc.document.body.clientHeight:ScLoc.innerHeight;		 if(Nav4){	CntrTxt=MenuTextCentered!='left'?"<div align='"+MenuTextCentered+"'>":"";			 TxtClose="</font>"+MenuTextCentered!='left'?"</div>":""}}	 FirstColPos=Nav4?FrstLoc.document:FrstLoc.document.body;	 SecColPos=Nav4?ScLoc.document:ScLoc.document.body;	 DocColPos=Nav4?DcLoc.document:ScLoc.document.body;	 if (TakeOverBgColor)FirstColPos.bgColor=AcrssFrms?SecColPos.bgColor:DocColPos.bgColor;	 if(MenuCentered=='justify'&&FirstLineHorizontal)ClcJus();	 if(FrstCreat){		 FrstCntnr=CreateMenuStructure('Menu',NoOffFirstLineMenus);		 FrstCreat=AcrssFrms?0:1}	 else CreateMenuStructureAgain('Menu',NoOffFirstLineMenus);	 if(TargetLoc)ClcTrgt();	 if(MenuCentered)ClcLft();	 if(MenuVerticalCentered)ClcTp();	 PosMenu(FrstCntnr,StartTop,StartLeft);	 IniFlg=1;	 Initiate();	 Creatd=1;	 ScLdAgainWin=ExpYes?ScLoc.document.body:ScLoc;	 ScLdAgainWin.onunload=UnLoaded;	 Trigger.onresize=Nav4?ReDoWhole:RePos;	 AfterBuild();	 if(MenuVerticalCentered=='static'&&!AcrssFrms)setInterval('KeepPos()',250);	 status='Menu ready for use'}  function KeepPos(){	 var TS=ExpYes?FrstLoc.document.body.scrollTop:FrstLoc.pageYOffset;	 if(TS!=StaticPos){		 var FCStyle=Nav4?FrstCntnr:FrstCntnr.style;		 FCStyle.top=FrstCntnr.OrgTop=StartTop+TS;StaticPos=TS}}  function ClcJus(){	 var a=BorderBtwnElmnts?1:2,b=BorderBtwnElmnts?BorderWidth:0;	 var Size=Math.round(((FrstWinWdth-a*BorderWidth)/NoOffFirstLineMenus)-,i,j;	 for(i=1;i<NoOffFirstLineMenus+1;i++){j=eval('Menu'+i);j[5]=Size}	 StartLeft=0}  function ClcTrgt(){	 var TLoc=Nav4?FrstLoc.document.layers[TargetLoc]:DomYes?FrstLoc.document.getElementById(TargetLoc):FrstLoc.document.all[TargetLoc];	 StartTop=M_StrtTp;	 StartLeft=M_StrtLft;	 if(DomYes){		 while(TLoc){StartTop+=TLoc.offsetTop;StartLeft+=TLoc.offsetLeft;TLoc=TLoc.offsetParent}}	 else{	StartTop+=Nav4?TLoc.pageY:TLoc.offsetTop;StartLeft+=Nav4?TLoc.pageX:TLoc.offsetLeft}}  function ClcLft(){	 if(MenuCentered!='left'&&MenuCentered!='justify'){		 var Size=FrstWinWdth-(!Nav4?parseInt(FrstCntnr.style.width):FrstCntnr.clip.width);		 StartLeft=M_StrtLft;		 StartLeft+=MenuCentered=='right'?Size:Size/2}}  function ClcTp(){	 if(MenuVerticalCentered!='top'&&MenuVerticalCentered!='static'){		 var Size=FrstWinHght-(!Nav4?parseInt(FrstCntnr.style.height):FrstCntnr.clip.height);		 StartTop=M_StrtTp;		 StartTop+=MenuVerticalCentered=='bottom'?Size:Size/2}}  function PosMenu(CntnrPntr,Tp,Lt){	 var Topi,Lefti,Hori;	 var Cntnr=CntnrPntr;	 var Mmbr=Cntnr.FrstMbr;	 var CntnrStyle=!Nav4?Cntnr.style:Cntnr;	 var MmbrStyle=!Nav4?Mmbr.style:Mmbr;	 var PadL=Mmbr.value.indexOf('<')==-1?LftXtra:0;	 var PadT=Mmbr.value.indexOf('<')==-1?TpXtra:0;	 var MmbrWt=!Nav4?parseInt(MmbrStyle.width)+PadL:MmbrStyle.clip.width;	 var MmbrHt=!Nav4?parseInt(MmbrStyle.height)+PadT:MmbrStyle.clip.height;	 var CntnrWt=!Nav4?parseInt(CntnrStyle.width):CntnrStyle.clip.width;	 var CntnrHt=!Nav4?parseInt(CntnrStyle.height):CntnrStyle.clip.height;	 var SubTp,SubLt;	 RcrsLvl++;	 if (RcrsLvl==1 && AcrssFrms)!MenuFramesVertical?Tp=FrstWinHght-CntnrHt+(Nav4?4:0):Lt=RightToLeft?0:FrstWinWdth-CntnrWt+(Nav4?4:0);	 if (RcrsLvl==2 && AcrssFrms)!MenuFramesVertical?Tp=0:Lt=RightToLeft?ScWinWdth-CntnrWt:0;	 if (RcrsLvl==2 && AcrssFrms){Tp+=VerCorrect;Lt+=HorCorrect}	 CntnrStyle.top=RcrsLvl==1?Tp:0;	 Cntnr.OrgTop=Tp;	 CntnrStyle.left=RcrsLvl==1?Lt:0;	 Cntnr.OrgLeft=Lt;	 if (RcrsLvl==1 && FirstLineHorizontal){		 Hori=1;Lefti=CntnrWt-MmbrWt-2*BorderWidth;Topi=0}	 else{	Hori=Lefti=0;Topi=CntnrHt-MmbrHt-2*BorderWidth}	 while(Mmbr!=null){		 MmbrStyle.left=Lefti+BorderWidth;		 MmbrStyle.top=Topi+BorderWidth;		 if(Nav4)Mmbr.CmdLyr.moveTo(Lefti+BorderWidth,Topi+BorderWidth);		 if(Mmbr.ChildCntnr){			 if(RightToLeft)ChldCntnrWdth=Nav4?Mmbr.ChildCntnr.clip.width:parseInt(Mmbr.ChildCntnr.style.width);			 if(Hori){	SubTp=Topi+MmbrHt+2*BorderWidth;				 SubLt=RightToLeft?Lefti+MmbrWt-ChldCntnrWdth:Lefti}			 else{	SubLt=RightToLeft?Lefti-ChldCntnrWdth+ChildOverlap*MmbrWt+BorderWidth:Lefti+(1-ChildOverlap)*MmbrWt+BorderWidth;				 SubTp=RcrsLvl==1&&AcrssFrms?Topi:Topi+ChildVerticalOverlap*MmbrHt}			 PosMenu(Mmbr.ChildCntnr,SubTp,SubLt)}		 Mmbr=Mmbr.PrvMbr;		 if(Mmbr){	MmbrStyle=!Nav4?Mmbr.style:Mmbr;			 PadL=Mmbr.value.indexOf('<')==-1?LftXtra:0;			 PadT=Mmbr.value.indexOf('<')==-1?TpXtra:0;			 MmbrWt=!Nav4?parseInt(MmbrStyle.width)+PadL:MmbrStyle.clip.width;			 MmbrHt=!Nav4?parseInt(MmbrStyle.height)+PadT:MmbrStyle.clip.height;			 Hori?Lefti-=BorderBtwnElmnts?(MmbrWt+BorderWidth):(MmbrWt):Topi-=BorderBtwnElmnts?(MmbrHt+BorderWidth):(MmbrHt)}}	 RcrsLvl--}  function Initiate(){	 if(IniFlg){	Init(FrstCntnr);IniFlg=0;		 if(ShwFlg)AfterCloseAll();ShwFlg=0}}  function Init(CntnrPntr){	 var Mmbr=CntnrPntr.FrstMbr;	 var MCStyle=Nav4?CntnrPntr:CntnrPntr.style;	 RcrsLvl++;	 MCStyle.visibility=RcrsLvl==1?M_Show:M_Hide;	 while(Mmbr!=null){		 if(Mmbr.Hilite){Mmbr.Hilite=0;if(KeepHilite)LowItem(Mmbr)}		 if(Mmbr.ChildCntnr) Init(Mmbr.ChildCntnr);		 Mmbr=Mmbr.PrvMbr}	 RcrsLvl--}  function ClearAllChilds(Pntr){	 var CPCCStyle;	 while (Pntr){		 if(Pntr.Hilite){			 Pntr.Hilite=0;			 if(KeepHilite)LowItem(Pntr);			 if(Pntr.ChildCntnr){				 CPCCStyle=Nav4?Pntr.ChildCntnr:Pntr.ChildCntnr.style;				 CPCCStyle.visibility=M_Hide;				 ClearAllChilds(Pntr.ChildCntnr.FrstMbr)}			 break}		 Pntr=Pntr.PrvMbr}}  function GoTo(){	 if(this.LinkTxt){		 status='';		 var HP=Nav4?this.LowLyr:this;		 LowItem(HP);		 this.LinkTxt.indexOf('java script:')!=-1?eval(this.LinkTxt):DcLoc.location.href=this.LinkTxt}}  function HiliteItem(P){	 if(Nav4){		 if(P.ro)P.document.images[P.rid].src=P.ri2;		 else{	if(P.HiBck)P.bgColor=P.HiBck;			 if(P.value.indexOf('<img')==-1){				 P.document.write(P.Ovalue);				 P.document.close()}}}	 else{	if(P.ro){	var Lc=P.Level==1?FrstLoc:ScLoc;			 Lc.document.images[P.rid].src=P.ri2}		 else{	if(P.HiBck)P.style.backgroundColor=P.HiBck;			 if(P.HiFntClr)P.style.color=P.HiFntClr}}	 P.Hilite=1}  function LowItem(P){	 if(P.ro){	if(Nav4)P.document.images[P.rid].src=P.ri1;		 else{	var Lc=P.Level==1?FrstLoc:ScLoc;			 Lc.document.images[P.rid].src=P.ri1}}	 else{	if(Nav4){	if(P.LoBck)P.bgColor=P.LoBck;			 if(P.value.indexOf('<img')==-1){				 P.document.write(P.value);				 P.document.close()}}		 else{	if(P.LoBck)P.style.backgroundColor=P.LoBck;			 if(P.LwFntClr)P.style.color=P.LwFntClr}}}  function OpenMenu(){		 if(!Loadd||!Creatd) return;	 var TpScrlld=ExpYes?ScLoc.document.body.scrollTop:ScLoc.pageYOffset;	 var LScrlld=ExpYes?ScLoc.document.body.scrollLeft:ScLoc.pageXOffset;	 var CCnt=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr;	 var ThisHt=Nav4?this.clip.height:parseInt(this.style.height);	 var ThisWt=Nav4?this.clip.width:parseInt(this.style.width);	 var ThisLft=AcrssFrms&&this.Level==1&&!FirstLineHorizontal?0:Nav4?this.Container.left:parseInt(this.Container.style.left);	 var ThisTp=AcrssFrms&&this.Level==1&&FirstLineHorizontal?0:Nav4?this.Container.top:parseInt(this.Container.style.top);	 var HP=Nav4?this.LowLyr:this;	 CurrntOvr=this;	 IniFlg=0;	 ClearAllChilds(this.Container.FrstMbr);	 HiliteItem(HP);	 if(CCnt!=null){		 if(!ShwFlg){ShwFlg=1;	BeforeFirstOpen()}		 var CCW=Nav4?this.LowLyr.ChildCntnr.clip.width:parseInt(this.ChildCntnr.style.width);		 var CCH=Nav4?this.LowLyr.ChildCntnr.clip.height:parseInt(this.ChildCntnr.style.height);		 var ChCntTL=Nav4?this.LowLyr.ChildCntnr:this.ChildCntnr.style;		 var SubLt=AcrssFrms&&this.Level==1?CCnt.OrgLeft+ThisLft+LScrlld:CCnt.OrgLeft+ThisLft;		 var SubTp=AcrssFrms&&this.Level==1?CCnt.OrgTop+ThisTp+TpScrlld:CCnt.OrgTop+ThisTp;		 if(MenuWrap){			 if(RightToLeft){				 if(SubLt<LScrlld)SubLt=this.Level==1?LScrlld:SubLt+(CCW+(1-2*ChildOverlap)*ThisWt);				 if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=ScWinWdth+LScrlld-CCW}			 else{	if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=this.Level==1?ScWinWdth+LScrlld-CCW:SubLt-(CCW+(1-2*ChildOverlap)*ThisWt);				 if(SubLt<LScrlld)SubLt=LScrlld}			 if(SubTp+CCH>TpScrlld+ScWinHght)SubTp=this.Level==1?SubTp=TpScrlld+ScWinHght-CCH:SubTp-CCH+(1-2*ChildVerticalOverlap)*ThisHt;			 if(SubTp<TpScrlld)SubTp=TpScrlld}		 ChCntTL.top=SubTp;ChCntTL.left=SubLt;ChCntTL.visibility=M_Show}	 status=this.LinkTxt}  function OpenMenuClick(){	 if(!Loadd||!Creatd) return;	 var HP=Nav4?this.LowLyr:this;	 CurrntOvr=this;	 IniFlg=0;	 ClearAllChilds(this.Container.FrstMbr);	 HiliteItem(HP);	 status=this.LinkTxt}  function CloseMenu(){	 if(!Loadd||!Creatd) return;	 if(!KeepHilite){		 var HP=Nav4?this.LowLyr:this;		 LowItem(HP)}	 status='';	 if(this==CurrntOvr){		 IniFlg=1;		 if(CloseTmr)clearTimeout(CloseTmr);		 CloseTmr=setTimeout('Initiate(CurrntOvr)',DissapearDelay)}}  function CntnrSetUp(Wdth,Hght,NoOff){	 var x=RcrsLvl==1?BorderColor:BorderSubColor;	 this.FrstMbr=null;	 this.OrgLeft=this.OrgTop=0;	 if(x)this.bgColor=x;	 if(Nav4){	this.visibility='hide';		 this.resizeTo(Wdth,Hght)}	 else{	if(x)this.style.backgroundColor=x;		 this.style.width=Wdth;		 this.style.height=Hght;		 this.style.fontFamily=FontFamily;		 this.style.fontWeight=FontBold?'bold':'normal';		 this.style.fontStyle=FontItalic?'italic':'normal';		 this.style.fontSize=FontSize+'pt';		 this.style.zIndex=RcrsLvl+Ztop}}  function MbrSetUp(MmbrCntnr,PrMmbr,WhatMenu,Wdth,Hght){	 var Location=RcrsLvl==1?FrstLoc:ScLoc;	 var MemVal=eval(WhatMenu+'[0]');	 var t,T,L,W,H,S;	 var a,b,c,d;	 this.PrvMbr=PrMmbr;	 this.Level=RcrsLvl;	 this.LinkTxt=eval(WhatMenu+'[1]');	 this.Container=MmbrCntnr;	 this.ChildCntnr=null;	 this.Hilite=0;	 this.style.overflow='hidden';	 this.style.cursor=ExpYes&&(this.LinkTxt||(RcrsLvl==1&&UnfoldsOnClick))?'hand':'default';	 this.ro=0;	 if(MemVal.indexOf('rollover')!=-1){		 this.ro=1;		 this.ri1=MemVal.substring(MemVal.indexOf(':')+1,MemVal.lastIndexOf(':'));		 this.ri2=MemVal.substring(MemVal.lastIndexOf(':')+1,MemVal.length);		 this.rid=WhatMenu+'i';MemVal="<img src='"+this.ri1+"' name='"+this.rid+"'>"}	 this.value=MemVal;	 if(RcrsLvl==1){		 a=LowBgColor;		 b=HighBgColor;		 c=FontLowColor;		 d=FontHighColor}	 else{	a=LowSubBgColor;		 b=HighSubBgColor;		 c=FontSubLowColor;		 d=FontSubHighColor}	 this.LoBck=a;	 this.LwFntClr=c;	 this.HiBck=b;	 this.HiFntClr=d;	 this.style.color=this.LwFntClr;	 if(this.LoBck)this.style.backgroundColor=this.LoBck;	 this.style.textAlign=MenuTextCentered;	 if(eval(WhatMenu+'[2]'))this.style.backgroundImage="url(\'"+eval(WhatMenu+'[2]')+"\')";	 if(MemVal.indexOf('<')==-1){		 this.style.width=Wdth-LftXtra;		 this.style.height=Hght-TpXtra;		 this.style.paddingLeft=LeftPaddng;		 this.style.paddingTop=TopPaddng}	 else{	this.style.width=Wdth;		 this.style.height=Hght}	 if(MemVal.indexOf('<')==-1&&DomYes){		 t=Location.document.createTextNode(MemVal);		 this.appendChild(t)}	 else this.innerHTML=MemVal;	 if(eval(WhatMenu+'[3]')&&ShowArrow){		 a=RcrsLvl==1&&FirstLineHorizontal?3:RightToLeft?6:0;		 S=Arrws[a];		 W=Arrws[a+1];		 H=Arrws[a+2];		 T=RcrsLvl==1&&FirstLineHorizontal?Hght-H-2:(Hght-H)/2;		 L=RightToLeft?2:Wdth-W-2;		 if(DomYes){			 t=Location.document.createElement('img');			 this.appendChild(t);			 t.style.position='absolute';			 t.src=S;			 t.style.width=W;			 t.style.height=H;			 t.style.top=T;			 t.style.left=L}		 else{	MemVal+="<div style='position:absolute; top:"+T+"; left:"+L+"; width:"+W+"; height:"+H+";visibility:inherit'><img src='"+S+"'></div>";			 this.innerHTML=MemVal}}	 if(ExpYes){this.onselectstart=CnclSlct;		 this.onmouseover=RcrsLvl==1&&UnfoldsOnClick?OpenMenuClick:OpenMenu;		 this.onmouseout=CloseMenu;		 this.onclick=RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?OpenMenu:GoTo	}	 else{	RcrsLvl==1&&UnfoldsOnClick?this.addEventListener('mouseover',OpenMenuClick,false):this.addEventListener('mouseover',OpenMenu,false);		 this.addEventListener('mouseout',CloseMenu,false);		 RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?this.addEventListener('click',OpenMenu,false):this.addEventListener('click',GoTo,false)}}  function NavMbrSetUp(MmbrCntnr,PrMmbr,WhatMenu,Wdth,Hght){	 var a,b,c,d;	 if(RcrsLvl==1){		 a=LowBgColor;		 b=HighBgColor;		 c=FontLowColor;		 d=FontHighColor}	 else {	a=LowSubBgColor;		 b=HighSubBgColor;		 c=FontSubLowColor;		 d=FontSubHighColor	}	 this.value=eval(WhatMenu+'[0]');	 this.ro=0;	 if(this.value.indexOf('rollover')!=-1){		 this.ro=1;		 this.ri1=this.value.substring(this.value.indexOf(':')+1,this.value.lastIndexOf(':'));		 this.ri2=this.value.substring(this.value.lastIndexOf(':')+1,this.value.length);		 this.rid=WhatMenu+'i';this.value="<img src='"+this.ri1+"' name='"+this.rid+"'>"}	 if(LeftPaddng&&this.value.indexOf('<')==-1&&MenuTextCentered=='left')this.value=' \;'+this.value;	 if(FontBold)this.value=this.value.bold();	 if(FontItalic)this.value=this.value.italics();	 this.Ovalue=this.value;	 this.value=this.value.fontcolor©;	 this.Ovalue=this.Ovalue.fontcolor(d);	 this.value=CntrTxt+"<font face='"+FontFamily+"' point-size='"+FontSize+"'>"+this.value+TxtClose;	 this.Ovalue=CntrTxt+"<font face='"+FontFamily+"' point-size='"+FontSize+"'>"+this.Ovalue+TxtClose;	 this.LoBck=a;	 this.HiBck=b;	 this.ChildCntnr=null;	 this.PrvMbr=PrMmbr;	 this.Hilite=0;	 this.visibility='inherit';	 if(this.LoBck)this.bgColor=this.LoBck;	 this.resizeTo(Wdth,Hght);	 if(!AcrssFrms&&eval(WhatMenu+'[2]'))this.background.src=eval(WhatMenu+'[2]');	 this.document.write(this.value);	 this.document.close();	 this.CmdLyr=new Layer(Wdth,MmbrCntnr);	 this.CmdLyr.Level=RcrsLvl;	 this.CmdLyr.LinkTxt=eval(WhatMenu+'[1]');	 this.CmdLyr.visibility='inherit';	 this.CmdLyr.onmouseover=RcrsLvl==1&&UnfoldsOnClick?OpenMenuClick:OpenMenu;	 this.CmdLyr.onmouseout=CloseMenu;	 this.CmdLyr.captureEvents(Event.MOUSEUP);	 this.CmdLyr.onmouseup=RcrsLvl==1&&UnfoldsOnClick&&eval(WhatMenu+'[3]')?OpenMenu:GoTo;	 this.CmdLyr.LowLyr=this;	 this.CmdLyr.resizeTo(Wdth,Hght);	 this.CmdLyr.Container=MmbrCntnr;	 if(eval(WhatMenu+'[3]')&&ShowArrow){		 a=RcrsLvl==1&&FirstLineHorizontal?3:RightToLeft?6:0;		 this.CmdLyr.ImgLyr=new Layer(Arrws[a+1],this.CmdLyr);		 this.CmdLyr.ImgLyr.visibility='inherit';		 this.CmdLyr.ImgLyr.top=RcrsLvl==1&&FirstLineHorizontal?Hght-Arrws[a+2]-2:(Hght-Arrws[a+2])/2;		 this.CmdLyr.ImgLyr.left=RightToLeft?2:Wdth-Arrws[a+1]-2;		 this.CmdLyr.ImgLyr.width=Arrws[a+1];		 this.CmdLyr.ImgLyr.height=Arrws[a+2];		 ImgStr="<img src='"+Arrws[a]+"' width='"+Arrws[a+1]+"' height='"+Arrws[a+2]+"'>";		 this.CmdLyr.ImgLyr.document.write(ImgStr);		 this.CmdLyr.ImgLyr.document.close()}}  function CreateMenuStructure(MName,NumberOf){	 RcrsLvl++;	 var i,NoOffSubs,Mbr,Wdth=0,Hght=0;	 var PrvMmbr=null;	 var WMnu=MName+'1';	 var MenuWidth=eval(WMnu+'[5]');	 var MenuHeight=eval(WMnu+'[4]');	 var Location=RcrsLvl==1?FrstLoc:ScLoc;	 if (RcrsLvl==1&&FirstLineHorizontal){		 for(i=1;i<NumberOf+1;i++){			 WMnu=MName+eval(i);			 Wdth=eval(WMnu+'[5]')?Wdth+eval(WMnu+'[5]'):Wdth+MenuWidth}		 Wdth=BorderBtwnElmnts?Wdth+(NumberOf+1)*BorderWidth:Wdth+2*BorderWidth;Hght=MenuHeight+2*BorderWidth}	 else{	for(i=1;i<NumberOf+1;i++){			 WMnu=MName+eval(i);			 Hght=eval(WMnu+'[4]')?Hght+eval(WMnu+'[4]'):Hght+MenuHeight}		 Hght=BorderBtwnElmnts?Hght+(NumberOf+1)*BorderWidth:Hght+2*BorderWidth;Wdth=MenuWidth+2*BorderWidth}	 if(DomYes){		 var MmbrCntnr=Location.document.createElement("div");		 MmbrCntnr.style.position='absolute';		 MmbrCntnr.style.visibility='hidden';		 Location.document.body.appendChild(MmbrCntnr)}	 else{	if(Nav4) var MmbrCntnr=new Layer(Wdth,Location)		 else{	WMnu+='c';			 Location.document.body.insertAdjacentHTML("AfterBegin","<div id='"+WMnu+"' style='visibility:hidden; position:absolute;'><\/div>");			 var MmbrCntnr=Location.document.all[WMnu]}}	 MmbrCntnr.SetUp=CntnrSetUp;	 MmbrCntnr.SetUp(Wdth,Hght,NumberOf);	 if(Exp4){	MmbrCntnr.InnerString='';		 for(i=1;i<NumberOf+1;i++){			 WMnu=MName+eval(i);			 MmbrCntnr.InnerString+="<div id='"+WMnu+"' style='position:absolute;'><\/div>"}		 MmbrCntnr.innerHTML=MmbrCntnr.InnerString}	 for(i=1;i<NumberOf+1;i++){		 WMnu=MName+eval(i);		 NoOffSubs=eval(WMnu+'[3]');		 Wdth=RcrsLvl==1&&FirstLineHorizontal?eval(WMnu+'[5]')?eval(WMnu+'[5]'):MenuWidth:MenuWidth;		 Hght=RcrsLvl==1&&FirstLineHorizontal?MenuHeight:eval(WMnu+'[4]')?eval(WMnu+'[4]'):MenuHeight;		 if(DomYes){			 Mbr=Location.document.createElement("div");			 Mbr.style.position='absolute';			 Mbr.style.visibility='inherit';			 MmbrCntnr.appendChild(Mbr)}		 else Mbr=Nav4?new Layer(Wdth,MmbrCntnr):Location.document.all[WMnu];		 Mbr.SetUp=Nav4?NavMbrSetUp:MbrSetUp;		 Mbr.SetUp(MmbrCntnr,PrvMmbr,WMnu,Wdth,Hght);		 if(NoOffSubs) Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);		 PrvMmbr=Mbr}	 MmbrCntnr.FrstMbr=Mbr;	 RcrsLvl--;	 return(MmbrCntnr)}  function CreateMenuStructureAgain(MName,NumberOf){	 var i,WMnu,NoOffSubs,PrvMmbr,Mbr=FrstCntnr.FrstMbr;	 RcrsLvl++;	 for(i=NumberOf;i>0;i--){		 WMnu=MName+eval(i);		 NoOffSubs=eval(WMnu+'[3]');		 PrvMmbr=Mbr;		 if(NoOffSubs)Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);		 Mbr=Mbr.PrvMbr}	 RcrsLvl--}  <b>

Last File where you want to use menu

3) File Name : Header.htm

</b> <table border="0" width="100%" height="73" align=center>   <TR>	 	 <TD align=center  height=73 rowSpan=4 valign="top">	   <img src="images/head.JPG" width="100%" height="79">	 </td>   </TR>	 </table> <center> <center> <div align="center">   <center> <table>	 <tr> 		 <td height="23" >  		 <script type='text/javascript' src='exmplmenu_var2.js'>		 </script>		 <script type='text/javascript' src='menu_com.js'>		  </script>		 </td>	 </table> <hr> <b>

Sign In

Drop Down Menu: Help Needed

Recommended Posts

Evolke 0

Share this post

Link to post

Share on other sites

xpress 0

Share this post

Link to post

Share on other sites

rpgsearcherz 5

Share this post

Link to post

Share on other sites

veerumits 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information