Dropdown Menu -- submenus don't display properly

[Nebulosity]

First, go easy on me. I'm not terribly knowledgeable in this area.

I incorporated a dropdown JS menu into my site at

http://www.stratalignment.com/Beta/index3.html.

The problem is that in both IE 7 and FF 3, the submenus don't drop straight down under the parent menus. Instead, they pop up on the top of the page. I haven't tested other browsers.

The relevent lines at that page are:

<script language="JavaScript1.2" src="scripts/menu_data.js"></script>

...AND...

<script language="JavaScript1.2" src="scripts/menu_script.js"></script>

That's the main problem I'm requesting assistance for, and I'll include the code for the two scripts involved below.

On a separate note, I'd like to ask whether it would be difficult to convert this script so that it uses mouse clicks rather than mouse overs -- or to slow down the mouseover display. I find it difficult to select exactly what I want in the submenus because it is too "sensitive" or "quick."

OK, here are the two scripts used:

=======================================================
BEGIN CODE
=======================================================

============
MENU_DATA.JS
============
td_1 = "Main"
url_1 = "index.html"
td_2 = "About Us"
td_3 = "Services"
td_4 = "Testimonials"
td_5 = "Events"
url_5 = "events.html"
td_6 = "Need a Speaker?"
url_6 = "speaking.html"
td_7 = "Contact Us"
url_7 = "contact.html"
td_2_1 = "Integrity and Values"
url_2_1 = "integrity.html"
td_2_2 = "Guaranteed Results"
url_2_2 = "guarantee.html"
td_2_3 = "Methods"
url_2_3 = "methods.html"
td_2_4 = "Qualifications"
url_2_4 = "qualifications.html"
td_2_5 = "Need a Speaker?"
url_2_5 = "speaking.html"
td_3_1 = "For Organizations"
td_3_2 = "For Individuals"
td_3_3 = "For Youth Development"
td_4_1 = "Organizational Services"
url_4_1 = "org_testimonials.html"
td_4_2 = "Youth Development Services"
url_4_2 = "youth_testimonials.html"
td_3_1_1 = "Organizational Assessment"
url_3_1_1 = "orgassessment.html"
td_3_1_2 = "Strategic Planning and Execution"
url_3_1_2 = "strategy.html"
td_3_1_3 = "Executive Leadership"
url_3_1_3 = "execleadership.html"
td_3_1_4 = "Process and Quality"
url_3_1_4 = "process.html"
td_3_1_5 = "Salesforce Development"
url_3_1_5 = "salesforce.html"
td_3_1_6 = "Customer Loyalty & Service"
url_3_1_6 = "customerloyalty.html"
td_3_1_7 = "Management Development"
url_3_1_7 = "mgmtleadership.html"
td_3_1_8 = "Team Leadership"
url_3_1_8 = "teamleadership.html"
td_3_1_9 = "Entrepreneurial Leadership"
url_3_1_9 = "entleadership.html"
td_3_2_1 = "Entrepreneurial Leadership"
url_3_2_1 = "entleadership.html"
td_3_2_2 = "Life Coaching"
url_3_2_2 = "coaching.html"
td_3_2_3 = "Career Coaching"
url_3_2_3 = "coaching.html"
td_3_2_4 = "Professional Coaching"
url_3_2_4 = "coaching.html"
td_3_3_1 = "Leadership Development"
url_3_3_1 = "risingstars.html"
td_3_3_2 = "Time Strategies"
url_3_3_2 = "timemanagement.html"
td_3_3_3 = "Life Coaching"
url_3_3_3 = "coaching.html"

==============
MENU_SCRIPT.JS
==============

////////////////////Please leave this notice////////////////////
//
// DropDown Menu 1.0
// By Evgeny Novikov (anfy@msn.com)
//

http://java.skyteam.ru

// It works only with IE5.0(++) and Netscape6.0(++)
// Free to use!
//
////////////////////Last modified 2002-03-05////////////////////

// Modify following four lines to customize your menu
var tdColor="#28457d"; // menu item text color
var tdBgColor="#b5c2d3"; // menu item background color
var hlColor="white"; // highlight text color
var hlBgColor="#003366"; // highlight background color
// After change, modify same values in your *.css file

var md=250;
var ti=-1;
var oTd=new Object;
oTd=null;

function doMenu(td){
clearTimeout(ti);
td.style.backgroundColor=hlBgColor;
td.style.color=hlColor;
var i;
var sT="";
var tda=new Array();
tda=td.id.split("_");
if(oTd!=null){
var tdo=new Array();
tdo=oTd.id.split("_");
for(i=1;i<tdo.length;i++){
sT+="_"+tdo;
if(tdo!=tda){
document.getElementById("td"+sT).style.backgroundColor=tdBgColor;
document.getElementById("td"+sT).style.color=tdColor;
if(document.getElementById("tbl"+sT)!=null)
document.getElementById("tbl"+sT).style.visibility="hidden";
}
}
}
oTd=td;
sT="tbl";
for(i=1;i<tda.length;i++)
sT+="_"+tda;
if(document.getElementById(sT)!=null)
document.getElementById(sT).style.visibility="visible";

}

function clearMenu(){
if(oTd!=null){
var tdo=new Array();
tdo=oTd.id.split("_");
var sT="";
for(var i=1;i<tdo.length;i++){
sT+="_"+tdo;
document.getElementById("td"+sT).style.backgroundColor=tdBgColor;
document.getElementById("td"+sT).style.color=tdColor;
if(document.getElementById("tbl"+sT)!=null)
document.getElementById("tbl"+sT).style.visibility="hidden";
}
oTd=null;
}
}

function runMenu(strURL){
location.href=strURL;
}

var tt="";
var sT="";
var pT=new Array();
var tA=new Array();

function getCoord(st){
tA=st.split("_");
if(tA.length>2){
tA=tA.slice(0,-1);
tt=tA.join("_");
return (document.getElementById("tbl"+tt).offsetTop+document.getElementById("td"+st).offsetTop+4)+"px;left:"+
(document.getElementById("tbl"+tt).offsetLeft+document.getElementById("td"+st).offsetWidth-2)+"px\">";
}
return (document.getElementById("mainmenu").offsetTop+document.getElementById("td"+st).offsetHeight-2)+"px;left:"+
(document.getElementById("mainmenu").offsetLeft+document.getElementById("td"+st).offsetLeft+5)+"px\">";
}

var sH="<table class=\"menu\" id=\"mainmenu\" cellspacing=\"0\"><tr>";
var p=0;
var j=0;
while(eval("typeof(td_"+ ++j +")!=\"undefined\"")){
sH+="<td id=\"td_"+j+"\" onmouseover=\"doMenu(this)\" onmouseout=\"ti=setTimeout('clearMenu()',md)\"";
sH+=(eval("typeof(url_"+j+")!=\"undefined\""))?" onclick=\"runMenu('"+eval("url_"+j)+"')\">":">";
sH+=eval("td_"+j)+"</td>";
if (eval("typeof(td_"+j+"_1)!=\"undefined\""))
pT[p++]="_"+j;
}
sH+="</tr></table>";
document.write(sH);
for(var q=0;typeof(pT[q])!="undefined";q++){
sT=pT[q];
sH="";
j=0;
sH+="<table class=\"menu\" id=\"tbl"+sT+"\" cellspacing=\"0\" style=\"top:"+getCoord(sT);
while (eval("typeof(td"+sT+"_"+ ++j +")!=\"undefined\"")){
sH+="<tr><td id=\"td"+sT+"_"+j+"\" onmouseover=\"doMenu(this)\" onmouseout=\"ti=setTimeout('clearMenu()',md)\"";
sH+=(eval("typeof(url"+sT+"_"+j+")!=\"undefined\""))?" onclick=\"runMenu('"+eval("url"+sT+"_"+j)+"')\">":">";
sH+=eval("td"+sT+"_"+j)+"</td></tr>";
if (eval("typeof(td"+sT+"_"+j+"_1)!=\"undefined\""))
pT[p++]=sT+"_"+j;
}
sH+="</table>";
document.write(sH);
}
document.getElementById("mainmenu").style.visibility="visible";

=======================================================
END OF CODE
=======================================================

Thanks for any gelp you can provide!

~ N

 

[BillyRayPreachersSon]

It fails in IE6 and Fx2, as well, and I'm guessing most browsers.

The quick fix: Give the DIV that holds your menu script a position style of "relative".

The reason: Because your sub-menus are absolutely positioned, they will be positioned relative to their closest positioned ancestor element, or the body if none is present (which is causing your problem).

Positioning the surrounding DIV relatively then makes it the closest positioned ancestor element, and so the menus align with that rather than to the body.

On another note, have you considered ditching tables for layout altogether, though? For such a simple layout, I think this would be fairly easy to do.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Nebulosity]

Dan:

Thanks for the assistance dor for the clear answer.

I adjusted the positioning to Relative. Here's the code:

===========
<div style="position:relative" align="center">

<script language="JavaScript1.2" src="scripts/menu_script.js"></script>

</div>
============
That made a difference, but not enough. The submenus display to the far left now rather than below their parent menus, impossible to click on.

I tried removing "align="Center" from the div but that didn't work -- the whole thing was then left aligned and the subs appeared over top of the parents.

What next?

As to removing tables, I would love to. I call myself an advanced novice. I have Dreamweaver 8 and am comfortable using it. I tweak code when I can find examples. That's about it.

I did try to create the whole page in DIVs and CSS, which I'd prefer. I got just so far and then quit because I wasn't sure how to make the dives on the left and right grow to the same size as the div for the page's main text area. I may have chickened out too soon.

You can see what I did do at

http://www.stratalignment.com/Beta/index2.html

Finally, any suggestions on converting the menu script to a mouse click rather than mouse over? Is that a complex process?

Thanks again.

~ N

 

[BillyRayPreachersSon]

It looks fine in Fx2 - perhaps it's broken in IE6 because you are using completely different top/left values for your sub-menus?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Nebulosity]

Dan:

I hadn't looked at it in Fx3 until you said that, and it does work correctly in thatbrowser. But not in my IE7. (Those are the only two browsers I have available for testing).

Please explain more fully what you mean by my "using completely different top/left values for sub-menus."

Where will I find that, in the JS code? I don't know enough to tweak the script itself, so please be explicit.

Thank you,

~N

 

[BillyRayPreachersSon]

Hmm - Ok those coords are being output by the script.

I'm not sure I fancy debugging a script that's 7 years old, and so will never have been written for IE6, let alone IE7. Perhaps it might be a lot easier to upgrade to one of the many recent menu scripts around (that will also be likely not to use tables)?

Here are a bunch that might work, although you can always look around for more if these aren't good for your requirements:

http://www.cssplay.co.uk/menus/final_drop.html

http://www.cssplay.co.uk/menus/drop_examples.html

http://www.alistapart.com/articles/dropdowns/

http://htmldog.com/articles/suckerfish/dropdowns/

http://sperling.com/examples/menuh/

http://www.seoconsultants.com/css/menus/horizontal/

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/