Can U Have TopOffset on Relative Positioned Menus?

[keeva_one]

I have this menu I'm installing here http://m-pact.dreamhost.com/

I;d like the sub menu to appear two pixels lower than they currently do. Here is my source:

Code: Select all

<script>
         with(milonic=new menuname("Main Menu")){
			style=menuStyle;
			alwaysvisible=1;
			orientation="horizontal";
			position="relative";
			aI("text=home;url=http://www.m-pact.com/;status=m-pact home page;");
			aI("text=news;url=http://www.m-pact.com/;status=m-pact home page;");
			aI("text=tour;url=http://www.m-pact.com/;status=m-pact home page;");
			aI("text=forum;url=http://www.m-pact.com/;status=m-pact home page;");
			aI("text=join;url=http://www.m-pact.com/;status=m-pact home page;");
			aI("text=media;showmenu=media;");
			aI("text=journals;showmenu=journals;");
			aI("text=store;showmenu=store;");
			aI("text=bios;showmenu=bios;");
			aI("text=educators;showmenu=educators;");
			aI("text=about;showmenu=about;");
			}
         drawMenus();
      </script>

and

Code: Select all

_menuCloseDelay=250           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=100            // The time delay before menus open on mouse over
_subOffsetTop=40              // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset


with(menuStyle=new mm_style()){
onbgcolor="#000000";
offbgcolor="#000000";
oncolor="#DFBA56";
offcolor="#FFFFFF";
xbordercolor="#9E9E9E";
xborderstyle="solid";
xborderwidth=1;
separatorcolor="#000000";
separatorsize="1";
padding=9;
xfontsize="1em";
xfontstyle="normal";
xfontfamily="Verdana, Tahoma, Arial";
pagecolor="#DFBA56";
pagebgcolor="#4C4C4C";
headercolor="#ffffff";
headerbgcolor="#000000";
xsubimage="/images/arrow.gif";
xsubimagepadding="2";
overfilter="Fade(duration=0.2)";
outfilter="Fade(duration=0.3)";
}

with(submenuStyle=new mm_style()){
onbgcolor="#303030";
offbgcolor="#000000";
oncolor="#DFBA56";
offcolor="#FFFFFF";
bordercolor="#9E9E9E";
borderstyle="solid";
borderwidth=1;
separatorcolor="#9E9E9E";
separatorsize="1";
xseparatorpadding="4";
padding=4;
xfontsize="1em";
xfontstyle="normal";
xfontfamily="Verdana, Tahoma, Arial";
pagecolor="#DFBA56";
pagebgcolor="#4C4C4C";
headercolor="#ffffff";
headerbgcolor="#000000";
xsubimage="/images/arrow.gif";
xsubimagepadding="2";
overfilter="Alpha(opacity=90);Shadow(color='#000000', Direction=135, Strength=5)";
xoutfilter="Fade(duration=0.3)";
}


with(milonic=new menuname("media")){
style=submenuStyle;
aI("text=music;url=/media/music/;status=m-pact music downlods and samples;");
aI("text=photos;url=/media/photos/;status=m-pact photos from the road, live, candid and promo;");
aI("text=video;url=/media/video/;status=m-pact video streams and downloads;");
aI("text=wallpaper;url=/media/wallpaper/;status=m-pact photos you can download and use for your computer's background;");
}

with(milonic=new menuname("journals")){
style=submenuStyle;
aI("text=marco cassone;url=/marco/;status=;");
aI("text=trist ethan curless;url=/trist/;status=;");
aI("text=britt quentin;url=/britt/;status=;");
aI("text=rudy cardenas;url=/rudy/;status=;");
aI("text=jeff smith;url=/jeff/;status=;");
aI("text=brian atkinson;url=/brian/;status=;");
}
with(milonic=new menuname("store")){
style=submenuStyle;
aI("text=CDs;url=/store/cds/;status=;");
aI("text=clothes;url=/store/clothes/;status=;");
aI("text=sheet music;url=/store/sheetmusic/;status=;");
aI("text=photos;url=/store/photos/;status=;");
}
with(milonic=new menuname("bios")){
style=submenuStyle;
aI("text=band bio;url=/bio/;status=;");
aI("text=marco cassone;url=/marco/bio/;status=;");
aI("text=trist ethan curless;url=/trist/bio/;status=;");
aI("text=britt quentin;url=/britt/bio/;status=;");
aI("text=rudy cardenas;url=/rudy/bio/;status=;");
aI("text=jeff smith;url=/jeff/bio/;status=;");
aI("text=brian atkinson;url=/brian/bio/;status=;");
}
with(milonic=new menuname("educators")){
style=submenuStyle;
aI("text=where we've taught;url=/educators/where/;status=;");
aI("text=letters & reviews ;url=/educators/letters/;status=;");
aI("text=clinics;url=/educators/clinics/;status=;");
aI("text=videos;url=/educators/videos/;status=;");
aI("text=sheet music;url=/store/sheetmusic/;status=;");
aI("text=video;url=/media/video/;status=m-pact video streams and downloads;");
aI("text=credentials;url=/educators/cred/;status=;");
}
with(milonic=new menuname("about")){
style=submenuStyle;
aI("text=contact us;url=/contact/;status=;");
aI("text=booking;url=/booking/;status=;");
aI("text=press;url=/press/;status=;");
aI("text=hospitality riders;url=/rides/;status=;");
aI("text=stage plot;url=/stage/;status=;");
aI("text=awards;url=/awards/;status=;");
aI("text=discography;url=/discography/;status=;");
}


drawMenus();

but the _subOffsetTop=40 doesn't do anything?? BTW, I used 40pixels to be sure I see it when it works. I've also tired _subOffsetTop=-40 and I've tried placing this "_subOffsetTop=40" within both styles.

Can anyone offer a solution?

thanks,

- Kevin

[Ruth]

One thing you need to do is upgrade to the newest release. You are at 5.1 it is now 5.18. I don't think that will fix your problem, but it will fix others you probably don't even know exist!

Ruth

[kevin3442]

Hi Kevin,

The global submenu offsets only work when the submenu is opened from a vertical parent menu. Since your main menu is horizontal, the glogal sub offsets will have no effect (as you've discovered). There is a workaround. You can put a vertical offset in each of your second-level menus by using the top property in them to set an offset. Take your "store" menu as an example. You'd add the top property as an offset like so:

Code: Select all

with(milonic=new menuname("store")){ 
style=submenuStyle; 
top="offset=2";
aI("text=CDs;url=/store/cds/;status=;"); 
aI("text=clothes;url=/store/clothes/;status=;"); 
aI("text=sheet music;url=/store/sheetmusic/;status=;"); 
aI("text=photos;url=/store/photos/;status=;"); 
}

Note the "offset=" syntax of the top property. Positive values offset the menu downward; negative values, upward.

If you want to be able to tweak the offset value without having to edit the value in every single submenu, you could declare your own global at the top of menu_data.js, e.g.:

Code: Select all

_mySubOffsetTop = 2;

Then in your menu definition, use the following syntax:

Code: Select all

top="offset="+_mySubOffsetTop;

Then, when you change the value of _mySubOffsetTop, it would affect all of the menus using that custom setting.

Hope that helps,

Kevin

[keeva_one]

Kevin, thank you. This works great.

It's nice to see this forum's members take pride in complete and accurate answers. I wish my web host and other software vendors were as complete and quick.

thanks again,

- Kevin