sub menus off-set
sub menus off-set
Ok I'm gonna try to re-word this so I don't sound so stupid. I'm working on a new site that does not yet even have hosting so there will be no links sorry. While implementing this menu horizontally I originally had the page background and the menu background set to white and I had no problems. However when I changed the menu background to yellow I noticed a problem. The menu drop downs were off set by one pixel in relation to the menu items. (ex. the drop downs had a one pixel width column of yellow sticking out to the left of the menu item and a one pixel width column of white sticking in from the right) I fixed this problem in IE and later versions of NS however NS 4 and below still have this problem. This being the only problem I have left has made me inclined to go ahead with production however I would greatly appreciate any help you can offer me.
Last edited by brrobin1 on Tue Jan 07, 2003 4:49 pm, edited 1 time in total.
Here is my menu_aray.js file. server.com is not my address but a place holder untill I can get my own server.
Code: Select all
/*
Milonic DHTML Website Navigation Menu - Version 3.x
Written by Andy Woolley - Copyright 2002 (c) Milonic Solutions Limited. All Rights Reserved.
Please visit http://www.milonic.co.uk/menu or e-mail menu3@milonic.com for more information.
The Free use of this menu is only available to Non-Profit, Educational & Personal web sites.
Commercial and Corporate licenses are available for use on all other web sites & Intranets.
All Copyright notices MUST remain in place at ALL times and, please keep us informed of your
intentions to use the menu and send us your URL.
*/
//The following line is critical for menu operation, and MUST APPEAR ONLY ONCE. If you have more than one menu_array.js file rem out this line in subsequent files
menunum=0;menus=new Array();_d=document;function addmenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<script language=javascript>";for(a=1;a<menus.length;a++){mt+=" menu"+a+"=menus["+a+"];"}mt+="<\/script>";_d.write(mt)}
//Please leave the above line intact. The above also needs to be enabled if it not already enabled unless this file is part of a multi pack.
////////////////////////////////////
// Editable properties START here //
////////////////////////////////////
// Special effect string for IE5.5 or above please visit http://www.milonic.co.uk/menu/filters_sample.php for more filters
effect = "Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color='#777777', Direction=135, Strength=0)"
timegap=500 // The time delay for menus to remain visible
followspeed=5 // Follow Scrolling speed
followrate=40 // Follow Scrolling Rate
suboffset_top=0; // Sub menu offset Top position
suboffset_left=0; // Sub menu offset Left position
closeOnClick = true
style1=[ // style1 is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style.
"blue", // Mouse Off Font Color
"white", // Mouse Off Background Color
"red", // Mouse On Font Color
"FFCC00", // Mouse On Background Color
"white", // Menu Border Color
12, // Font Size in pixels
"normal", // Font Style (italic or normal)
"bold", // Font Weight (bold or normal)
"Verdana, sans-serif", // Font Name
2, // Menu Item Padding
, // Sub Menu Image (Leave this blank if not needed)
, // 3D Border & Separator bar
"white", // 3D High Color
"white", // 3D Low Color
"Purple", // Current Page Item Font Color (leave this blank to disable)
"pink", // Current Page Item Background Color (leave this blank to disable)
, // Top Bar image (Leave this blank to disable)
"orange", // Menu Header Font Color (Leave blank if headers are not needed)
"000099", // Menu Header Background Color (Leave blank if headers are not needed)
"white", // Menu Item Separator Color
]
style2=[ // style2 is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style.
"blue", // Mouse Off Font Color
0, // Mouse Off Background Color
"red", // Mouse On Font Color
0, // Mouse On Background Color
"FFCC00", // Menu Border Color
12, // Font Size in pixels
"normal", // Font Style (italic or normal)
"bold", // Font Weight (bold or normal)
"Verdana, sans-serif", // Font Name
4, // Menu Item Padding
, // Sub Menu Image (Leave this blank if not needed)
0, // 3D Border & Separator bar
"FFCC00", // 3D High Color
"FFCC00", // 3D Low Color
"Purple", // Current Page Item Font Color (leave this blank to disable)
"pink", // Current Page Item Background Color (leave this blank to disable)
, // Top Bar image (Leave this blank to disable)
"orange", // Menu Header Font Color (Leave blank if headers are not needed)
"000099", // Menu Header Background Color (Leave blank if headers are not needed)
"white", // Menu Item Separator Color
]
addmenu(menu=[ // This is the array that contains your menu properties and details
"mainmenu", // Menu Name - This is needed in order for the menu to be called
97, // Menu Top - The Top position of the menu in pixels
200, // Menu Left - The Left position of the menu in pixels
149, // Menu Width - Menus width in pixels
0, // Menu Border Width
"center", // Screen Position - here you can use "center;left;right;middle;top;bottom" or a combination of "center:middle"
style1, // Properties Array - this is set higher up, as above
1, // Always Visible - allows the menu item to be visible at all time (1=on/0=off)
"left", // Alignment - sets the menu elements text alignment, values valid here are: left, right or center
effect, // Filter - Text variable for setting transitional effects on menu activation - see above for more info
, // Follow Scrolling - Tells the menu item to follow the user down the screen (visible at all times) (1=on/0=off)
1, // Horizontal Menu - Tells the menu to become horizontal instead of top to bottom style (1=on/0=off)
, // Keep Alive - Keeps the menu visible until the user moves over another menu or clicks elsewhere on the page (1=on/0=off)
, // Position of TOP sub image left:center:right
, // Set the Overall Width of Horizontal Menu to 100% and height to the specified amount (Leave blank to disable)
, // Right To Left - Used in Hebrew for example. (1=on/0=off)
, // Open the Menus OnClick - leave blank for OnMouseover (1=on/0=off)
, // ID of the div you want to hide on MouseOver (useful for hiding form elements)
, // Background image for menu when BGColor set to transparent.
, // Scrollable Menu
, // Reserved for future use
,"Getting Started ","show-menu=started","http://www.server.com/started.html target=main","",1 // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar"
,"Test Drive ","show-menu=test","http://www.server.com/test_drive.html target=main","",1
,"FAQs ","show-menu=faq",,"",1
,"User Information ","show-menu=user",,"",1
,"Enroll ","show-menu=enroll",,"",1
])
addmenu(menu=["started",
,,150,0,"",style2,,"left",effect,,,,,,,,,"images/bk.gif",,,
,"With Frames","http://www.server.com/started.html target=main",,,1
,"No Frames","http://www.server.com/Nstarted.html target=main",,,1
])
addmenu(menu=["test",
,,150,0,"",style2,,"left",effect,,,,,,,,,"images/bk.gif",,,
,"With Frames","javascript:win(\"http://www.server.com/TD.html\");",,,1
,"No Frames","javascript:win(\"http://www.server.com/NTD.html\");",,,1
])
addmenu(menu=["faq",,,150,0,,style2,0,"left",effect,,,,,,,,,"images/bk.gif",,,
,"With Frames","http://www.server.com/faqs.html target=main",,,1
,"No Frames","http://www.server.com/Nfaqs.html target=main",,,1
])
addmenu(menu=["user",
,,150,0,"",style2,,"",effect,,,,,,,,,"images/bk.gif",,,
,"With Frames", "http://www.server.com/user.htm target=main",,,1
,"No Frames", "http://www.server.com/Nuser.html target=main",,,1
])
addmenu(menu=["enroll",
,,150,0,"",style2,,"",effect,,,,,,,,,"images/bk.gif",,,
,"With Frames", "http://www.server.com/enroll.htm target=main",,,1
,"No Frames", "http://www.server.com/Nenroll.html target=main",,,1
])
dumpmenus()
Last edited by brrobin1 on Tue Jan 07, 2003 4:53 pm, edited 2 times in total.
Here is my html file. server.com is not the actuall address of the site but a place holder untill I get my own server.
Code: Select all
<html>
<head>
<title>DHTML Menu Sample</title>
<link rel="stylesheet" type="text/css" href="http://websites.milonic.com/server.com/acct_style.css">
<SCRIPT language="JavaScript">
<!--
function netscape()
{
mapWindow = window.open('http://www.server.com/netscape_users.html','browser','width=700,height=500,resizable=yes,scrollbars=yes,status=yes')
}
function win(i) {
mapWindow = window.open(i,'nfWIN', 'toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=700,height=400,left=10,top=10');
mapWindow.focus();
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#3333CC" vlink="#007722" alink="#C0C0C0" topmargin="0" leftmargin="20" marginheight="0" marginwidth="0">
<SCRIPT language=JavaScript src="menu_array.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="mmenu.js" type=text/javascript></SCRIPT>
<table width="99%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10"> </td>
<td>
<table width="99%" cellspacing="0" cellpadding="0" background="images/bar.gif" height="33" border="0">
<tr>
<td width="100%" align="right" valign="middle"><font color="#ffffff" face="Arial"><b>INFORMATION</b></font> </td>
</tr>
</table>
<table width="99%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href="http://websites.milonic.com/server.com" target="_top"><img src="images/logo.gif" alt="Home" border="0"></a></td>
<td><a href="javascript:win('http://www.server.com/whatsnew.html');"><img src="http://www.navyfcu.org/images/aa-out.gif" border="0" alt="What's New!"></a></td>
<td><a href="javascript:win('http://www.server.com/signup.html','main_frames', 'toolbar=yes,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=660,height=600,left=0,top=10');">Sign Up</a> <font color="#FFCC00" size="+2">|</font> <a href="javascript:win('http://www.server.com/privacy.html');">Privacy</a> <font color="#FFCC00" size="+2">|</font> <a href="http://websites.milonic.com/server.com" target="_top">Home</a> <font color="#FFCC00" size="+2">|</font> <a href="http://websites.milonic.com/server.com/logon.html" target="_top"><img src="images/signon1.gif" border="0" align="absbottom" alt="sign on"></a></td>
</tr>
</table>
<table width="99%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<script language=JavaScript>
PlaceMenu("mainmenu")
</script>
</td>
</tr>
</table>
<table width="99%" cellspacing="0" cellpadding="0" height="5" border="0">
<tr>
<td>
<BR>
</td>
</tr>
<tr>
<td width="100%" align="right" valign="top" background="images/bar2.gif"><img src="images/blank.gif" width="5" height="5" alt="" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>I updated the question and both of my code blocks since I got some of the problem solved. Here is a picture of one of my menu items and its related drop down.
Notice the white bar in the upper left, that is what I am talking about with the off-set. Also as a secondary question if anyone know how to get rid of the white bar between the two drop down options I would apreciate it.
Notice the white bar in the upper left, that is what I am talking about with the off-set. Also as a secondary question if anyone know how to get rid of the white bar between the two drop down options I would apreciate it.