Relative position of submenu

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:29

Relative position of submenu

Poster: sofro
Dated: Monday October 10 2005 - 10:36:40 BST

Hi.

I have this problem: I want two layers menu. Both layers are horizontal, like Amazon example. But I want each submenu starts at same left position as main menu starts (main menu is in ceter of the page). Here is an example. Problem with this is, that in FireFox SubMenu starts at left side of the page. Not left side of the table. And in IE it starts fine, BUT submenus allocates too much horizontal space. So TD in example is n-times higher, than it should be (n is count of submenus). What is wrong?

<html>
<head>
<script type="text/javascript" src="js/milonic_src.js"></script>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=js/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=js/mmenudom.js><\/scr"+"ipt>");
</script>
</head>
<body>
<table align="center" width="600" border=1>
<tr>
<td align="left" style="height: 72px; text-align: left;">
<script type="text/javascript">
fixMozillaZIndex = true;
_menuCloseDelay = 500;
_menuOpenDelay = 150;
_subOffsetTop = 2;
_subOffsetLeft = -2;

with (menuStyle = new mm_style()) {}
with (subMenu = new mm_style()) {}

with (new menuname("Menu1"))
{
position = "relative";
alwaysvisible = 1;
orientation = "horizontal";
style = menuStyle;
aI("showmenu=SubMenu1;text=Menu 1;");
aI("showmenu=SubMenu2;text=Menu 2;");
aI("showmenu=SubMenu3;text=Menu 3;");
}
with (new menuname("SubMenu1"))
{
position = "relative";
left = 0;
orientation = "horizontal";
style = subMenu;
aI("text=Sub Menu 1.1;");
aI("text=Sub Menu 1.2;");
aI("text=Sub Menu 1.3;");
}

with (new menuname("SubMenu2"))
{
position = "relative";
left = 0;
orientation = "horizontal";
style = subMenu;
aI("text=Sub Menu 2.1;");
aI("text=Sub Menu 2.2;");
aI("text=Sub Menu 2.3;");
}

with (new menuname("SubMenu3"))
{
position = "relative";
left = 0;
orientation = "horizontal";
style = subMenu;
aI("text=Sub Menu 3.1;");
aI("text=Sub Menu 3.2;");
aI("text=Sub Menu 3.3;");
}
drawMenus();
</script>
</td>
</tr>
</table>
<a href="http://www.milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
</body>
</html>

Poster: Andy
Dated: Monday November 21 2005 - 16:51:42 GMT

Hi,

it looks as though your use of relative positioning is causing the vertical space - Each item is on top of one another.

You might want to look at using absolute positioning for the sub menus connected to a 1px by 1px image inside the table cell.

Also, I don't see the problem with the menu opening at far left in my Firefox. Which version are you using?

-- Andy

Same Issue Here - Please Clarify

Poster: gatman
Dated: Tuesday November 29 2005 - 0:02:16 GMT

Using menu_sample9_ver5_735.zip

The horizontal main menu is centered within the table and the sub-menu does not remain centered

What do you mean "connected by a 1px x 1px image"?

<div align="center">
<table style="width: 770px; border: 0px solid #333333;"><tr><td>
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;

left=200;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";
aI("text=Commercial Environments;url=/commercial;showmenu=Commercial;");
aI("text=Private Residences;url=/residential;showmenu=Residential;");
aI("text=Specialty Applications;url=/specialty;showmenu=Specialty");
aI("text=Products & Services;url=/products;showmenu=Products;");
aI("text=About Us;showmenu=About;");
aI("text=Contact");
}
drawMenus();
</script>
</td></tr></table>
</div>

fixMozillaZIndex=true;
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
orientation="horizontal";
alwaysvisible="1";
position: "relative";
}

with(submenuStyle=new mm_style()){
}

with(milonic=new menuname("About")){
left=170;
orientation="horizontal";
style=submenuStyle;
aI("subimageposition=0;text=The Galaxy Difference;url=http://www.milonic.com/login.php;");
}

Resolved

Poster: gatman
Dated: Tuesday November 29 2005 - 14:46:31 GMT

I think this took care of it

Set screenposition to Center and left to "0"

Although I still don't understand what "connected to 1px x 1px image" means

Thanks
John
===============

with(milonic=new menuname("About")){
left=0;
orientation="horizontal";
screenposition="center";
style=submenuStyle;
aI("subimageposition=0;text=The Galaxy Difference;url=http://www.milonic.com/login.php;");
aI("subimageposition=0;text=Our Philosophy;url=http://www.milonic.com/mylicenses.php;");
aI("subimageposition=0;text=The People;url=http://www.milonic.com/myinvoices;");
}

drawMenus();

Industrial Strength JavaScript and DHTML Menus

Relative position of submenu

Same Issue Here - Please Clarify

Resolved