New to drop-down menus

[cherry]

HI

I am just starting out on javascript and need to create a navigation menu for my website that include drop-down menus.

I have been looking on the web to get a suitable script and have found a suitable one however I am trying to modify it slightly and am just getting more and more frustrated.

Basically I have created graphics and when you roll over certain areas the drop-down menu is activated on a layer. That's fine.....what my problem is when I roll out of the certain area my menu still stays down. I want it to diasappear but it only does this when I click elsewhere on the page.

I know that the example used has told the script to wait until a mouse click but I know that you can get it to change and recognise that fact that they menu should disappear when you roll off your hidden layer.

When I changed the script to say mouseover instad of mouseup it worked but only for half of my menu....I mean that the menu appears when it's supposed to and disappears when you roll off it but it will not allow me to access my full menu. It stops and disappears after the first line....help!

Any ideas?....... thanks for your help :
cherry

[trifi]

Could you post a snippet of the script in here for us to see? Its hard to address a problem without the code. It might be hidding the layer onfocus that is inside the mouseUp function. I would just lose the entire mouseUp function and write your own: try placing onMouseOut(this); inside the layer. then write the function in javascript:
function onMouseOut(el)
{
el.style.visibility='hidden';

}
but you might then have to add
function onMouseOver(el)
{
el.style.visibility='visible';

}

[cherry]

oops.......sorry

Here is the code that I have used which basically shows you most of what is included

var IE45 = (document.all)? 1:0;
var NN4 = (document.layers)? 1:0;
var DOM = (document.getElementById)? 1:0;
var IE4 = (IE45 &&!DOM)? 1:0;
var NS6 = (DOM &&!IE45)? 1:0
//=============================================
//===Document Object Switch for cross_browser functions====
//=================================================
if(NN4) {
doc = "document";
styl = "";
htm = ".document";
} else if(IE4) {
doc = "document.all";
styl = ".style";
htm = "";
} else if(DOM) {
doc = "document.getElementById";
styl = ".style";
htm = "";
}

//=======================================
function init() {
if(IE4 ¦¦ NN4) {
menu1Obj = eval(doc + '["menu1Lyr"]' + styl);
menu2Obj = eval(doc + '["menu2Lyr"]' + styl);
menu3Obj = eval(doc + '["menu3Lyr"]' + styl);
menu4Obj = eval(doc + '["menu4Lyr"]' + styl);
menu5Obj = eval(doc + '["menu5Lyr"]' + styl);
menu1Obj.left = 30;
menu1Obj.top = 115;
menu2Obj.left = 150;
menu2Obj.top = 115;
menu3Obj.left = 270;
menu3Obj.top = 115;
menu4Obj.left = 350;
menu4Obj.top = 115;
menu5Obj.left = 440;
menu5Obj.top = 115;
} else if(DOM) {
menu1Obj = eval(doc + '("menu1Lyr")' + styl);
menu2Obj = eval(doc + '("menu2Lyr")' + styl);
menu3Obj = eval(doc + '("menu3Lyr")' + styl);
menu4Obj = eval(doc + '("menu4Lyr")' + styl);
menu5Obj = eval(doc + '("menu5Lyr")' + styl);
menu1Obj.left = 30;
menu1Obj.top = 115;
menu2Obj.left = 150;
menu2Obj.top = 115;
menu3Obj.left = 270;
menu3Obj.top = 115;
menu4Obj.left = 350;
menu4Obj.top = 115;
menu5Obj.left = 440;
menu5Obj.top = 115;
}
}
//=============================================
//=========Hide Divisions============
//=============================================
function hidemenudiv(e) {
menu1Obj.visibility="hidden"
menu2Obj.visibility="hidden"
menu3Obj.visibility="hidden"
menu4Obj.visibility="hidden"
menu5Obj.visibility="hidden"
}
//========Capture Event==================
//=============================================
if (NN4 ¦¦ NS6) {
document.captureEvents(Event.MOUSEUP);
document.onmouseup=hidemenudiv;
}
//=============================================
//=======Show Divisions==========================
//=============================================
function showmenudiv(menu, content) {
switch (menu) {
case 1:
menuObject = menu1Obj
if(NN4) {
var lyr = document.layers["menu1Lyr"].document;
lyr.open();
lyr.write(content);
lyr.close();
} else if(IE4) {
document.all("menu1Lyr").innerHTML= content;
} else if(DOM) {
document.getElementById("menu1Lyr").innerHTML= content;
}
break;
case 2:
menuObject = menu2Obj
if(NN4) {
var lyr = document.layers["menu2Lyr"].document;
lyr.open();
lyr.write(content);
lyr.close();
} else if(IE4) {
document.all("menu2Lyr").innerHTML= content;
} else if(DOM) {
document.getElementById("menu2Lyr").innerHTML= content;
}
break;
case 3:
menuObject = menu3Obj
if(NN4) {
var lyr = document.layers["menu3Lyr"].document;
lyr.open();
lyr.write(content);
lyr.close();
} else if(IE4) {
document.all("menu3Lyr").innerHTML= content;
} else if(DOM) {
document.getElementById("menu3Lyr").innerHTML= content;
}
break;
case 4:
menuObject = menu4Obj
if(NN4) {
var lyr = document.layers["menu4Lyr"].document;
lyr.open();
lyr.write(content);
lyr.close();
} else if(IE4) {
document.all("menu4Lyr").innerHTML= content;
} else if(DOM) {
document.getElementById("menu4Lyr").innerHTML= content;
}
break;
case 5:
menuObject = menu5Obj
if(NN4) {
var lyr = document.layers["menu5Lyr"].document;
lyr.open();
lyr.write(content);
lyr.close();
} else if(IE4) {
document.all("menu5Lyr").innerHTML= content;
} else if(DOM) {
document.getElementById("menu5Lyr").innerHTML= content;
}
break;
}
menuObject.visibility="visible"
}

and then.................

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<BODY BGCOLOR="#F7FDFD" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ONLOAD="init()" onResize="history.go(0)" ONSCROLL="hidemenudiv()" ONMOUSEUP="hidemenudiv()">
<!--##################INSERT THE DIV TAGS JUST BEFORE THE </BODY> TAG###############-->
<DIV ID="menu1Lyr" STYLE="position:absolute; height:100; width:150; visibility: hidden" ONMOUSEUP="hidemenudiv()"></DIV>
<DIV ID="menu2Lyr" STYLE="position:absolute; height:100; width:150; visibility: hidden" ONMOUSEUP="hidemenudiv()"></DIV>
<DIV ID="menu3Lyr" STYLE="position:absolute; height:100; width:150; visibility: hidden" ONMOUSEUP="hidemenudiv()"></DIV>
<div id="menu4Lyr" style="position:absolute; height:100; width:150; visibility: hidden" onMouseUP="hidemenudiv()"></div>
<div id="menu5Lyr" style="position:absolute; height:100; width:150; visibility: hidden" onMouseUP="hidemenudiv()"></div>