Adding several lines of drop down menus

I need a few rows of navigation with drop down menus & can't get it to work

[Cow with fluffy sox]

Hi all, I don't often ask for help with these things, but here goes:

I need to build a site with 3 lines of navigation that are quite far apart. Each row needs to have JavaScript drop down menus in it and although I've made the first row successfully - no matter how hard I try to incorporate the other 2 it just gives me errors. Now, I made the first row in a file called menu_var1.js and the others in menu_var2.js and Menu_var3.js - any idea how I incorporate all of this? I'll admit I'm no expert at JavaScript, at least not yet. :)

This is the code for the one row:
<script type='text/javascript'>
function Go(){return}
</script>
<script type='text/javascript' src='js/menu_var1.js'></script>
<script type='text/javascript' src='js/menu_com.js'></script>

Thanks!
Liz

[MichaelBluejay]

I'm afraid I don't really understand what you're asking, especially what you mean by "row", or how your website looks. I also don't understand exactly what the problem is (e.g., "When I do X then Y happens." "gives me errors" is not very specific. Could you elaborate a little more?

[Cow with fluffy sox]

Okay, I'll do my best.

Okay, now I need a row of more or less 4 navigation buttons on each of the orange lines - and most will drop down with extra sections to click into.

Currently I have code that's already been written in a file called menu_com.js
It contains a lot of function commands etc. I don't know if I should post it since it's a LOT of code. Here's a small part of it:

"var AgntUsr=navigator.userAgent.toLowerCase();
var AppVer=navigator.appVersion.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 Opr6orless=window.opera && navigator.userAgent.search(/opera.[1-6]/i)!=-1 //DynamicDrive.com added code
if(Opr){NavYes=1;ExpYes=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 Exp6Plus=(AppVer.indexOf("msie 6")!= -1¦¦AppVer.indexOf("msie 7")!= -1)?1:0
var PosStrt=(NavYes¦¦ExpYes¦¦Opr)&&!Opr6orless?1:0;
var P_X=DomYes?"px":"",FHtml=null,ScHtml=null,FCmplnt=0,SCmplnt=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 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&&!Opr?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;
Trigger.onload=Go;

function Dummy(){return}

function CnclSlct(){return false}

function RePos(){
FrstWinWdth=ExpYes?FCmplnt?FHtml.clientWidth:FrstLoc.document.body.clientWidth:FrstLoc.innerWidth;
FrstWinHght=ExpYes?FCmplnt?FHtml.clientHeight:FrstLoc.document.body.clientHeight:FrstLoc.innerHeight;
ScWinWdth=ExpYes?SCmplnt?ScHtml.clientWidth:ScLoc.document.body.clientWidth:ScLoc.innerWidth;
ScWinHght=ExpYes?SCmplnt?ScHtml.clientHeight:ScLoc.document.body.clientHeight:ScLoc.innerHeight;
if(MenuCentered=='justify'&&FirstLineHorizontal){
FrstCntnr.style.width=FrstWinWdth+P_X;
var LftXtra=(DomNav&&!Opr)¦¦FCmplnt?LeftPaddng:0;
ClcJus();
var P=FrstCntnr.FrstMbr,W=Menu1[5],i;
for(i=0;i<NoOffFirstLineMenus;i++){P.style.width=W+P_X;P=P.PrvMbr}}"

Then there I also have a menu_var.js in my js folder, this is the one to edit to create your drop down menu. You use it to specify colours, links, images etc. This is a small piece off of the top where you edit the drop down menu's colour & font etc:

"var NoOffFirstLineMenus=4;// Number of first level items
var LowBgColor='#FFFFFF';// Background color when mouse is not over
var LowSubBgColor='#B60000';// Background color when mouse is not over on subs
var HighBgColor='#B60000';// Background color when mouse is over
var HighSubBgColor='#B60000';// Background color when mouse is over on subs
var FontLowColor='#FFFFFF';// Font color when mouse is not over
var FontSubLowColor='#FFFFFF';// Font color subs when mouse is not over
var FontHighColor='#7A2821';// Font color when mouse is over
var FontSubHighColor='#293879';// Font color subs when mouse is over
var BorderColor='#4099ED';// Border color"

Then you put in the details in this style:

"Menu1=new Array("rollover:images/b1_ministry.jpg:images/b2_ministry.jpg","","",5,15,109);
Menu1_1=new Array("MESSAGE FROM THE MINISTER","message.htm","",0,15,150);
Menu1_2=new Array("MISSION & OBJECTIVES","mission.htm","",0,15,150);
Menu1_3=new Array("OPERATIONAL VALUES","operational_values.htm","",0,15,150);
Menu1_4=new Array("STANDARDS OF SERVICE","standards.htm","",0,15,150);
Menu1_5=new Array("PARTNER ORGANISATIONS","partners.htm","",0,15,150);"

I have those 3 orange lines to fill with navigation on the site and it doesn't seem possible to add it all in menu_var.js so I've created a menu_var1.js and a menu_var2.js as well with all their details and positioning. The thing is I don'w know how to incorporate all 3 into the site using the code I gave in my first post. I've tried something like this:

"<script type='text/javascript'>
function Go(){return}
</script>
<script type='text/javascript' src='js/menu_var1.js'></script>
<script type='text/javascript' src='js/menu_var2.js'></script>
<script type='text/javascript' src='js/menu_var3.js'></script>
<script type='text/javascript' src='js/menu_com.js'></script>"

But it only loads the last one on the list instead of all 3. And if I try and edit it any other way I get "stack overflow at line 89".

Thank you very much for your help... I've been at this for 12 hours and just can't get it to work - and I can't carry on until the navigation is sorted.

[edited by: engine at 8:38 am (utc) on May 25, 2004]
[edit reason] no urls, thanks. [/edit]

[MichaelBluejay]

Okay, I think I understand now: You're trying to run multiple menu systems on the same page.

My guess is that it won't work, because the JavaScript menu system you got from somewhere doesn't support that. It might be possible to modify it to get it to work but that would be beyond my ability, and it's probably a non-trivial task for anybody. Have you tried writing to whoever wrote it?

You might want to think of using a simpler JavaScript menu solution. These systems can easily be 22k or more, maybe 28k with all your data in them. That's a minimum of four extra seconds for modem users (probably more), every single time they go to a new page on your site. I wouldn't want my site to appear that sluggish.

I rarely use dropdown menus but when I do I use the menu system from Apple, since it's really lightweight (like about 3 or 4k). I know we can't post personal URLs here but Apple and M$ or okay, right? I guess they'll just edit this out if it's not appropriate: [developer.apple.com...]

[Cow with fluffy sox]

Thanks for taking the time to reply. I suppose you're right - I'll work on the show/hide layer option or find another script. :)

Liz