background transparency of last submenu item

[stephank]

Hello There

I have 6 menus that each have 4 to 10 submenus. All submenus have rollovers and a solid background. Works like a charm!

I have added round corners in each submenu at the bottom. In order to see the round corner I'd like this header to have a transparent background. right now I see the square corners.

Here is the link: http://www.momovilaitanarak.com/_cr/home.html

Thanks! Any help appreciated.

stephan

Here is the code:

_menuCloseDelay=200;
_menuOpenDelay=80;
_subOffsetTop=-200;
_subOffsetLeft=-200;




with(submenuStyle=new mm_style()){
margin=0
fontfamily="Trebuchet, Trebuchet MS, Sans-Serif";
fontsize="13px";
fontstyle="normal";
fontweight="bold";
offbgcolor="#ffffff";
offcolor="#0d3875";
onbgcolor="#d4e1ee";
oncolor="#0d3875";

overfilter="Fade(overlap=0.50, duration=0.2)";
outfilter="Fade(overlap=0.50, duration=0.2)";
padding=5;
separatorcolor="#ffffff";
separatorsize=0;
subimagepadding=10;
itemwidth=170;
offclass="subborder";
onclass="subborder";
rawcss="padding-left:7px;";

}


with(menuStyle=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=0;
margin=0
fontfamily="Trebuchet, Trebuchet MS, Sans-Serif";
fontsize="13px";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#ff0000";
image="square_dust.gif";
imagepadding=0;
imagewidth=7;
imageheight=11;
imagealign="left";
offbgcolor="#ffffff";
offcolor="#0d3875";
onbgcolor="#ffffff";
oncolor="#0d3875";
outfilter="Fade(Overlap=1.00)";
overimage="orangeArrow.gif";
image="blankArrow.gif"
padding=4;
pagecolor="#0d3875";
pagebgcolor="#ffffff";
separatorcolor="#ffffff";
separatorsize=1;
subimagepadding=8;
styleid=1;
rawcss="padding-right:10px;";

}







with(mainMenu=new menuname("home")){
menuwidth="100%";
menualign="center";
alwaysvisible=1;
orientation="horizontal";
position="relative";
margin="0";
align="center";
openstyle="down";
style=menuStyle;
aI("showmenu=0;text=Home;url=home.html;");
aI("showmenu=action;text=Taking Legal Action;");
aI("showmenu=policy;text=Shaping Policy;");
aI("showmenu=publications;text=Publications;");
aI("showmenu=mediaCenter;text=Media Center;");
aI("showmenu=getInvolved;text=Get Involved;");
aI("showmenu=donate;text=Donate;");
aI("showmenu=events;text=Events;");
}

with(mainMenu=new menuname("action")){
openstyle="down";
style=submenuStyle;
top="offset=2";
aI("text= Investigating Failures;url=home.html;offbgcolor=white; offcolor=pink; onbgcolor=blue; oncolor=green;");
aI("text= Proving the Case;url=blank.html;offbgcolor=white; offcolor=pink; onbgcolor=blue; oncolor=green;");
aI("text= Making it Stick;url=blank.html;offbgcolor=white; offcolor=pink; onbgcolor=blue; oncolor=green;");
aI("text= Cases;url=blank.html;offbgcolor=white; offcolor=pink; onbgcolor=blue; oncolor=green;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend;offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}

with(mainMenu=new menuname("policy")){
openstyle="down";
style=submenuStyle;
top="offset=2";
aI("text= policy 1;url=blank.html;");
aI("text= policy 2;url=blank.html;");
aI("text= policy 3;url=blank.html;");
aI("text= policy 4;url=blank.html;");
aI("text= policy 5;url=blank.html;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend;offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}

with(mainMenu=new menuname("publications")){
openstyle="down";
style=submenuStyle;
top="offset=2";
aI("text= publications 1;url=blank.html;");
aI("text= publications 2;url=blank.html;");
aI("text= publications 3;url=blank.html;");
aI("text= publications 4;url=blank.html;");
aI("text= publications 5;url=blank.html;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend;offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}

with(mainMenu=new menuname("mediaCenter")){
openstyle="down";
style=submenuStyle;
top="offset=2";
aI("text= Media Center 1;url=blank.html;");
aI("text= Media Center 2;url=blank.html;");
aI("text= Media Center 3;url=blank.html;");
aI("text= Media Center 4;url=blank.html;");
aI("text=vMedia Center 5;url=blank.html;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend; offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}


with(mainMenu=new menuname("getInvolved")){
openstyle="down";
style=submenuStyle;
top="offset=2";
aI("text= getInvolved 1;url=blank.html;");
aI("text= getInvolved 2;url=blank.html;");
aI("text= getInvolved 3;url=blank.html;");
aI("text= getInvolved 4;url=blank.html;");
aI("text= getInvolved 5;url=blank.html;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend;offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}

with(mainMenu=new menuname("donate")){
openstyle="down";
style=submenuStyle;
top="offset=2";
left="offset=-70";
aI("text= donate 1;url=blank.html;");
aI("text= donate 2;url=blank.html;");
aI("text= donate 3;url=blank.html;");
aI("text= donate 4;url=blank.html;");
aI("text= donate 5;url=blank.html;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend;offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}


with(mainMenu=new menuname("events")){
openstyle="down";
style=submenuStyle;
top="offset=2";
left="offset=-107";
aI("text= events 1;url=blank.html;");
aI("text= events 2;url=blank.html;");
aI("text= events 3;url=blank.html;");
aI("text= events 4;url=blank.html;");
aI("text =events 5;url=blank.html;");
aI("image=roundCorners_180px.gif;type=header;itemheight=5;offclass=subborderend;onclass=subborderend;offbgcolor=transparent; onbgcolor=transparent;offcolor=transparent; oncolor=transparent;");
}


drawMenus();

[stephank]

Here are the two styles referred to in the file above:

.subborder{border-top:0px solid #ffffff;border-right:2px solid #efa42b; border-left:2px solid #efa42b; }
.subborderend{background-color:transparent; border-top:0px solid #ffffff;border-right:0px solid #efa42b; border-left:0px solid #efa42b; border-bottom:0px solid #efa42b;}

[Ruth]

Hi,

Remove from those header items

Code: Select all

offbgcolor=transparent; onbgcolor=transparent;
offcolor=transparent; oncolor=transparent;

Add to the style for those menus with that bottom image

Code: Select all

headerbgcolor="transparent";
menubgcolor="transparent";

Also, for your information, you are not placing the menu in the table as it is supposed to be placed so there will be problems in some browsers, notably the Mac especially with IE browser.

Remove the main menu from that menu data file, put it in it's own file and include a drawMenus(); at the end. It doesn't need the styles or anything just the main menu. Save it by whatever name you want, main.js as an example. Then put the call for the new menu_data.js file without the main in it back up with the other files just after the body tag, then in the table where you now have the call for the menu_data.js file put a call for the main.js file.

When putting the menu in a table, the submenus have to be built before anything else.

You can also remove the openstyle="down"; that is the default style.

Hope that helps.


PS: I'm not sure why you disabled the bbcode, but it's much better to put the code in the code tags, which won't work with that disabled.
Ruth

[stephank]

Sorry I didn't know what bbcode was. I'll turn it on next time.

[Ruth]

No problem, Stephan. When I first used this I tried to type in html tags for things like font and bold ...

Ruth