Need help in setting size of a horizontal menu in FireFox

rajupvv · Post by **rajupvv** » Sat Jan 21, 2006 5:18 am

Hi,

I have a requirement where there is a horizontal menu bar of width 765 pixes that is always shown in the page and I have embedded this menu inside a table. As the mouse is moved over to the items in the menu another horizontal scroolbar should be shown below the always shown one which should of the same length as the top one. Using the following code I was able to succesfully produce the end result in IE at different resolutions but when opened in Firefox or Netscape the 2nd horizontal menu bar is having the width as wide as my screen.

Here is the code from the html file that call menu_data.js
-----------------------------------------------------------------

Code: Select all

<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td class="lines">
<div id="nav" name="nav">
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="https://milonic.com/">DHTML JavaScript Website Pull Down Navigation Menu By Milonic</a></noscript>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
  else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
</div>
</td></tr>
</table>
</td>

And here is the code from the menu_data.js to display the main and 2nd horizontal menu.
------------------------------------------------------------------------------------

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
borderwidth=0;
fontfamily="Verdana, Arial, Tahoma";
fontsize="71%";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#e5e5e5";
itemheight=22;
itemwidth=120;
offbgcolor="#e5e5e5";
offcolor="#666666";
onbgcolor="#666666";
oncolor="#ffffff";
padding=0;
pagebgcolor="#666666";
pagecolor="#ffffff";
separatorcolor="#ffffff";
separatorsize=4;
}

with(secondMenuStyle=new mm_style()){
align="center";
bordercolor="#666666";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Arial, Tahoma";
fontsize="71%";
fontstyle="normal";
fontweight="bold";
itemheight=22;
offbgcolor="#999999";
offcolor="#cccccc";
onbgcolor="#999999";
oncolor="#ffffff";
padding=0;
separatorcolor="#999999";
separatorsize=5;
}

with(milonic=new menuname("Main Menu")){
align="center";
alwaysvisible=1;
menualign="center";
orientation="horizontal";
position="relative";
style=menuStyle;
aI("text=&nbsp;type=header;itemwidth=15;offborder=1px solid #7d7d7d;");
aI("showmenu=FOR CANDIDATES;text=FOR CANDIDATES;offborder=1px solid #7d7d7d;onborder=0px solid #7d7d7d;url=file:///C:/Jeff/Copy_of_index_candel.html;onfunction=setMenuPosition('FOR CANDIDATES');");
aI("showmenu=FOR CLIENTS;text=FOR CLIENTS;offborder=1px solid #7d7d7d;onborder=0px solid #7d7d7d;");
}

with(milonic=new menuname("FOR CANDIDATES")){
align="left";
left="offset=0";
menualign="center";
menuwidth="100%";
orientation="horizontal";
screenposition="center"
style=secondMenuStyle;
top="offset=50";
aI("text=&nbsp;type=header;itemwidth='2%';");
aI("showmenu=SEARCH JOBS;text=SEARCH JOBS;url=http://milonic.com/cbuy.php;itemwidth='14%';");
aI("showmenu=SUBMIT RESUME;text=SUBMIT RESUME;url=http://milonic.com/cbuy.php;itemwidth='17%';");
aI("showmenu=BENEFITS PACKAGE;text=BENEFITS PACKAGE;url=http://milonic.com/cbuy.php;itemwidth='21%';");
aI("showmenu=CONTACT US;text=CONTACT US;url=http://milonic.com/cbuy.php;itemwidth='14%';");
aI("showmenu=RESUME TIPS;text=RESUME TIPS;url=http://milonic.com/cbuy.php;itemwidth='15%';");
aI("showmenu=INTERVIEW TIPS;text=INTERVIEW TIPS;url=http://milonic.com/cbuy.php;itemwidth='16%';");
aI("text=&nbsp;type=header;itemwidth='1%';");
}

with(milonic=new menuname("FOR CLIENTS")){
align="left";
left="offset=0";
menualign="center";
menuwidth="100%";
orientation="horizontal";
screenposition="center"
style=secondMenuStyle;
top="offset=50";
aI("text=&nbsp;type=header;itemwidth='2%';");
aI("showmenu=CORPORATIONS;text=CORPORATIONS;url=http://www.a-q.co.uk/;itemwidth='25%';");
aI("showmenu=LAW FIRMS;text=LAW FIRMS;url=http://www.sms2email.com/;itemwidth='20%';");
aI("showmenu=GOVERNMENT/NON PROFIT;text=GOVERNMENT/NON PROFIT;url=http://www.softidiom.com/?milonicmenu;itemwidth='30%';");
aI("text=&nbsp;type=header;itemwidth='23%';");
}

drawMenus();

Please help as I am in deep trouble

Post by **Ruth** » Sat Jan 21, 2006 6:18 am

Hi,

First, you are not placing the menu in the table correctly. See below my name for info on that. The main menu should be cut from the menu_data.js file, it should be in its own file with a second drawMenus(); at the end and that file should be called inside the table, the other menu_data.js file which has the subs should be called the first thing after the body tag with the rest of the program files. For the menu to function correctly across browsers as to position of submenus in particular, especially in Mac IE, the submenus must be 'read' first by the browser before the main menu in the table.

Second, it is not recommend that you put the menu in a div.

Third, you have the submenus set at menuwidth="100%" so they will be 100% of the page, those menus are NOT in the table they open from the main menu and use internal program code as to position from their parent items. If you want the submenus to be the width of the main menu, then you need to set a width for the main menu, which I can't find in that code, and the same width for the submenu. So the main menu would have menuwidth=765; and the submenus would have menuwidth=765;

Ruth

rajupvv · Post by **rajupvv** » Sat Jan 21, 2006 10:29 pm

Hi Ruth,

You guys are

.

After I followed your instructions.
*) broke menu_data.js into 2 files one for main and 2nd for sub menus. *) Changed menu width to 765.
*) Loaded sub menus first then main menu

the things have fallen into place but still I am having issue with Safari browser. The 2nd horizontal menu is still not contained in the table it is expanding atleast 85% of the browser width.

Can you please help me on this also.

Thanks again for your support and prompt response.

Raju.

rajupvv · Post by **rajupvv** » Sun Jan 22, 2006 12:30 am

Hi,

After specifying the 2nd horizontal menu items size in pixels that came to a total of 765 the menu size in Safari got way much better but still is wider than the top horizontal menu.

So, I was wondering you can provide me a code snippet that would use safari specific menu_data.js file if the browser is safari and for all the other kinds of browsers use a different menu_data.js.

Thanks,
Raju.

Post by **Ruth** » Sun Jan 22, 2006 1:57 am

Hi,

Do you have a link to the page so we can see what's up? There shouldn't be a problem. I can't write functions, don't know anything about them.

Just so you are clear, the submenu do not open in a table, they do not go into some table cell. They open off the main menu, but are outside the table, I guess you could say they open 'on top' of everything.

Ruth