Hi David,
halcyon wrote:...Frankly I'm surprised I haven't had any comments from the admins in this thread... surely they are aware of these problems?
Well, speaking for myself, (1) I have been reading the thread, but (2) I have not contributed because I thought Maz's suggestions were quite good, (3) I had nothing to add as a definitive solution, and (4) I am not aware of this particular problem as a known issue with a known solution. Personally, I have never encountered this problem in my own use of the menu, nor have I seen these paricular problems discussed in other threads. I
am aware, however, of various strange behaviors people have encountered when trying to bind the menus to tables. I think that's what you have here... a uniquely odd behavior that results from putting the menu code in a unique table structure.
The
sample page (sample 9) that discusses how to embed a menu in a table, notes the following:
Note that this feature is still a work in progress and issues with tables [sic... should be 'menus'] embedded within tables are still evident, we are working on this though. If you are experiencing problems with relative menu positioning however, try and embed only the menu you want to be included within the table cell. Embedding whole menus is possible but can cause unpredictable results in complex table structures.
The sample code you provided does indeed embed all of your menu code, as well as all of the Milonic code, inside a somewhat complex table structure (in a table within a table). I'd say that the problems you are experienceing qualify as "unpredictable results". Many browers don't like it when you put javascript in a table, especialy if there's a lot of it. You might try as the sample suggests: (1) place your calls to milonic_src.js, mmenudom.js, (and mmenuns4.js) in the <head> or (as Maz suggests) at the top of the <body>, outside of any table definition. (2) place all of your menu code, except the main menu definition, inside a menu_data.js file, that you also src into the html page (where you load the other .js files). (3) Put only the code for your main menu in the table cell, along with the call drawMenus(), as shown on the sample page.
You may find that, with your combination of positioning in the table cell, combined with the table's own positioning, that you still have problems. have you considered not placing the manu in a table at all? (I think this is what Maz was getting at with her last suggestion). I believe that it would be pretty straight forward to achieve your desired page layout using the menu system's built-in positioning capabilities, without having to put the menu in a table. No embedding in tables... no odd table-related problems! Here's what your menu_data.js file might contain:
Code: Select all
_menuCloseDelay=400;
_menuOpenDelay=150;
_followSpeed=5;
_followRate=50;
_subOffsetTop=5;
_subOffsetLeft=-10;
_scrollAmount=3;
_scrollDelay=20;
with(menuStyle=new mm_style()){
onbgcolor="#323299";
oncolor="#ffffff";
offbgcolor="#000066";
offcolor="#ffffff";
bordercolor="#323299";
borderstyle="solid";
borderwidth=0;
separatorcolor="#323299";
separatorsize="1";
padding=5;
fontsize="75%";
fontstyle="normal";
fontfamily="Arial, Times New Roman, Verdana, Tahoma";
fontweight="bold";
pagecolor="#323299";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="/images/arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=100)";
outfilter="randomdissolve(duration=0.3)";
align="center";
}
with(milonic=new menuname("Marketing")){
top=0;
left=0;
//screenposition="center";
//menualign="center";
//menuwidth="100%";
alwaysvisible=1;
itemwidth="100%";
orientation="horizontal";
style=menuStyle;
aI("text=Home Page;url=/home.do;status=Back To Home Page;");
aI("text=View/Print Materials;url=/productSpecs/materials.jsp;");
aI("text=View/Print References;url=/flexReferences/viewFlexReferencesQuery.do;");
aI("text=Manage Prospects;url=/marketing/viewProspects.do;");
aI("text=Manage Sales Regions;url=/marketing/viewSalesRegions.do;");
}
drawMenus();
This would be in menu_data.js, loaded into your html file in the <head>, using the standard recommended method, like so:
Code: Select all
<script language=JavaScript src="milonic_src.js" type=text/javascript></script>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script language=JavaScript src="menu_data.js" type=text/javascript></script>
Note that in the menu_data.js file:
(1) Got rid of menuStyle2, since it wasn't used in your sample
(2) Put
align="center"; in menuStyle, and removed it from each menu item definition... less coding that way.
(3) Set the menu properties in the "Marketing" menu to achive the effect I think you're looking for. You'll notice that the
screenposition,
menualign, and
menuwidth properties are currently commented out. I don't think you'll need these properties to get the look you want, but you may end up having to play with them some as you check across browsers.
(4) Removed the non-breaking spaces in the menu items' text, so that if the menu gets squeezed, it can wrap the words and continue to shrink.
One more general suggestion. It looks like you're loading your menu.css file in the same table cell where you're loading the menu scripts. Might be better to load your style sheets in the <head>, and outside of any table.
Hope that helps,
Kevin
Man I hate it when that happens! 
I usually copy everything to the clipboard before previewing a long post, for just such an occasion, but forgot to do it that time. Now I'll have to do it over, but no time right now unfortunately. Hopefully, later.