Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:17
Need help in setting size of a horizontal menu in FireFox
Poster: rajupvv
Dated: Saturday January 21 2006 - 4:18:11 GMT
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:
<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="http://www.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>
<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="http://www.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:
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= 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= type=header;itemwidth='2%';");
aI("showmenu=SEARCH JOBS;text=SEARCH JOBS;url=http://www.milonic.com/cbuy.php;itemwidth='14%';");
aI("showmenu=SUBMIT RESUME;text=SUBMIT RESUME;url=http://www.milonic.com/cbuy.php;itemwidth='17%';");
aI("showmenu=BENEFITS PACKAGE;text=BENEFITS PACKAGE;url=http://www.milonic.com/cbuy.php;itemwidth='21%';");
aI("showmenu=CONTACT US;text=CONTACT US;url=http://www.milonic.com/cbuy.php;itemwidth='14%';");
aI("showmenu=RESUME TIPS;text=RESUME TIPS;url=http://www.milonic.com/cbuy.php;itemwidth='15%';");
aI("showmenu=INTERVIEW TIPS;text=INTERVIEW TIPS;url=http://www.milonic.com/cbuy.php;itemwidth='16%';");
aI("text= 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= 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= type=header;itemwidth='23%';");
}
drawMenus();
_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= 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= type=header;itemwidth='2%';");
aI("showmenu=SEARCH JOBS;text=SEARCH JOBS;url=http://www.milonic.com/cbuy.php;itemwidth='14%';");
aI("showmenu=SUBMIT RESUME;text=SUBMIT RESUME;url=http://www.milonic.com/cbuy.php;itemwidth='17%';");
aI("showmenu=BENEFITS PACKAGE;text=BENEFITS PACKAGE;url=http://www.milonic.com/cbuy.php;itemwidth='21%';");
aI("showmenu=CONTACT US;text=CONTACT US;url=http://www.milonic.com/cbuy.php;itemwidth='14%';");
aI("showmenu=RESUME TIPS;text=RESUME TIPS;url=http://www.milonic.com/cbuy.php;itemwidth='15%';");
aI("showmenu=INTERVIEW TIPS;text=INTERVIEW TIPS;url=http://www.milonic.com/cbuy.php;itemwidth='16%';");
aI("text= 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= 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= type=header;itemwidth='23%';");
}
drawMenus();
Please help as I am in deep trouble
Poster: Ruth
Dated: Saturday January 21 2006 - 5:18:10 GMT
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
Poster: rajupvv
Dated: Saturday January 21 2006 - 21:29:59 GMT
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.
Poster: rajupvv
Dated: Saturday January 21 2006 - 23:30:43 GMT
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.
Poster: Ruth
Dated: Sunday January 22 2006 - 0:57:34 GMT
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