Relative position of submenu

sofro · Post by **sofro** » Mon Oct 10, 2005 10:36 am

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://milonic.com/">JavaScript DHTML Drop Down Menu By Milonic</a>
</body>
</html>

Post by **Andy** » Mon Nov 21, 2005 5:51 pm

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

gatman · Post by **gatman** » Tue Nov 29, 2005 1:02 am

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://milonic.com/login.php;");
}

gatman · Post by **gatman** » Tue Nov 29, 2005 3:46 pm

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://milonic.com/login.php;");
aI("subimageposition=0;text=Our Philosophy;url=http://milonic.com/mylicenses.php;");
aI("subimageposition=0;text=The People;url=http://milonic.com/myinvoices;");
}

drawMenus();

Milonic JavaScript Menu

Relative position of submenu

Relative position of submenu

Same Issue Here - Please Clarify

Resolved