Corporate Menu

khammond · Post by **khammond** » Tue Nov 15, 2005 6:17 pm

I am currently using the corporate menu and I have no troubles changing colors, etc... But I have a 800x600 web design and would like to have 4 main menu items that are 200 wide each. I am unsure as to how to do this with the Corporate Menu. If anyone could help me I would appreciate it.

Post by **Ruth** » Tue Nov 15, 2005 6:43 pm

Hi,

Use the itemwidth property, if the main style is only used by the main menu, then you can put the itemwidth=200; in the style section. If that style is used by other menus then put the itemwidth=200; in each aI string.

Ruth

khammond · Post by **khammond** » Wed Nov 16, 2005 9:50 pm

Worked great! Thank you! I do have another question however, how can I center my text in those 200 width boxes? (my main menu text)

Post by **Ruth** » Thu Nov 17, 2005 1:38 am

Hi,

Since you want to center it for that whole menu, as long as that style is only used in that menu you can put align="center"; in the menuStyle. If that style is used for all menus, then you'd have to put it in the menu definition up where you have alwaysvisible=1; you'd put align="center";

Below my name are links to the menu properties quick reference guides for style properties, menu properties and item properties.

Ruth

khammond · Post by **khammond** » Thu Nov 17, 2005 7:48 pm

Thank you so much Ruth. I really appreciate the help. Is there anyway to do this without using absolute positioning? Like right now I made each menu 200 width, the first starting left 0 and then 200, 400, 600 respectively. I want the menu to be centered underneath a header that I have. I am unsure how to move the menu to where I want it to be. Do I have to wrap the menu in a div or something?

Post by **Ruth** » Thu Nov 17, 2005 8:42 pm

Hi,

Sorry, I'm one of those people for whom word descriptions don't translate into a visual. I need to see the page to be able to tell you how to keep the menu where you want it. There is a menu propery called screenposition="center"; maybe that's what you want.

Ruth

khammond · Post by **khammond** » Thu Nov 17, 2005 9:06 pm

Here is what I have so far, I needed all 4 main menus to have different background colors, so I created different main menus, did I do that correctly? Here is my code, also the link to what it looks like. Also, it seems like my width commands aren't giving the same results on each menu. Maybe I am doing something wrong? (or with the positioning)

http://www.saleminc.com/new/menu

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(menuStyle=new mm_style()){
styleid=1;
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#8C9FBF";
offcolor="#000000";
onbgcolor="#336699";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
itemwidth=200;
}


with(menuStyle2=new mm_style()){
styleid=1;
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#9D9FA1";
offcolor="#000000";
onbgcolor="#666666";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
itemwidth=200;
}

with(menuStyle3=new mm_style()){
styleid=1;
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#9FCC3C";
offcolor="#000000";
onbgcolor="#669900";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
itemwidth=200;
}

with(menuStyle4=new mm_style()){
styleid=1;
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#BC8490";
offcolor="#000000";
onbgcolor="#FF3333";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
itemwidth=200;
}



with(submenuStyle=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#8C9FBF";
offcolor="#ffffff";
onbgcolor="#336699";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
itemwidth=186;
}

with(submenuStyle2=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#9D9FA1";
offcolor="#ffffff";
onbgcolor="#666666";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
itemwidth=185;
}

with(submenuStyle3=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#9FCC3C";
offcolor="#ffffff";
onbgcolor="#669900";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
itemwidth=185;
}

with(submenuStyle4=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#BC8490";
offcolor="#ffffff";
onbgcolor="#FF3333";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
itemwidth=186;
}


with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
align="center";
left=0;
orientation="horizontal";
style=menuStyle;
top=0;	
aI("showmenu=Milonic;text=Employees;");
}

with(milonic=new menuname("Main Menu2")){
alwaysvisible=1;
align="center";
left=201;
orientation="horizontal";
style=menuStyle2;
top=0;
aI("showmenu=Partners;text=Clients;");
}


with(milonic=new menuname("Main Menu3")){
alwaysvisible=1;
align="center";
left=401;
orientation="horizontal";
style=menuStyle3;
top=0;
aI("showmenu=Links;text=About Salem;");
}

with(milonic=new menuname("Main Menu4")){
alwaysvisible=1;
align="center";
left=601;
orientation="horizontal";
style=menuStyle4;
top=0;
aI("showmenu=MyMilonic;text=Contact Us;");
}


with(milonic=new menuname("Milonic")){
margin=7;
style=submenuStyle;
aI("showmenu=Career Center;status=Career Center;text=Career Center;");
aI("showmenu=Employee Resource Center;status=Employee Resource Center;text=Employee Resource Center;");
}

with(milonic=new menuname("Partners")){
margin=7;
style=submenuStyle2;
aI("showmenu=Client Services;status=Client Services;text=Client Services;");
aI("showmenu=Client Resource Center;status=Client Resource Center;text=Client Resource Center;");
}

with(milonic=new menuname("Links")){
margin=7;
style=submenuStyle3;
aI("status=History;text=History;url=http://www.saleminc.com/;");
aI("status=Management Team;text=Management Team;url=http://www.saleminc.com/;");
aI("status=Visions & Values;text=Visions & Values;url=http://www.saleminc.com/;");
aI("status=Fast Facts;text=Fast Facts;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Client Services")){
margin=7;
style=submenuStyle2;
aI("text=Administrative Staffing;url=http://www.saleminc.com/;");
aI("text=Managed Staffing/Workforce Solutions;url=http://www.saleminc.com/;");
aI("text=IT/Tech Staffing;url=http://www.saleminc.com/;");
aI("text=Legal Staffing;url=http://www.saleminc.com/;");
aI("text=Land Professional Staffing;url=http://www.saleminc.com/;");
aI("text=Project Hiring/Payrolling;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Client Resource Center")){
margin=7;
style=submenuStyle2;
aI("text=Time Sheet Approval;url=http://www.saleminc.com/;");
aI("text=24/7 Requisitions;url=http://www.saleminc.com/;");
aI("text=Salem Support Systems;url=http://www.saleminc.com/;");
aI("text=Managed Services;url=http://www.saleminc.com/;");
aI("text=STREAMLINE;url=http://www.saleminc.com/;");
aI("text=How are we doing?;url=http://www.saleminc.com/;");
aI("text=Salem Team Members;url=http://www.saleminc.com/;");
aI("text=Useful Links;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Career Center")){
margin=7;
style=submenuStyle;
aI("text=Job Listing;url=http://www.saleminc.com/;");
aI("text=Working with Salem;url=http://www.saleminc.com/;");
aI("text=Diversity;url=http://www.saleminc.com/;");
aI("text=Staffing & Recruiting;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Employee Resource Center")){
margin=7;
style=submenuStyle;
aI("text=Input Hours Worked;url=http://www.saleminc.com/;");
aI("text=Assignment/Full Time Openings;url=http://www.saleminc.com/;");
aI("text=Employee Benefits;url=http://www.saleminc.com/;");
aI("text=Rules & Regulations;url=http://www.saleminc.com/;");
aI("text=Highlights Newsletter;url=http://www.saleminc.com/;");
aI("text=Suggestions?;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("MyMilonic")){
margin=7;
style=submenuStyle4;
aI("text=Chicago;url=mailto:chicago@saleminc.com");
aI("text=Deerfield;url=mailto:northshore@saleminc.com");
aI("text=Oakbrook Terrace;url=mailto:oakbrook@saleminc.com");
aI("text=Schaumburg;url=mailto:schaumburg@saleminc.com");
}

drawMenus();

Post by **Ruth** » Fri Nov 18, 2005 12:29 am

Hi,

It would be much easier to have the main as one menu. Then you only have to position it not 4 mains. Here is the new code making it one menu and centering the menu on the page. It still has the correct colors and the submenus are the correct size.

Below my name is a list of links for different menu properties, there is also a link for the beginners' forum which has a few very quick read tutorials on doing styles, one of which is using the copyOf shortcut which I used in this menu.

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-1;

with(menuStyle=new mm_style()){
styleid=1;
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#8C9FBF";
offcolor="#000000";
onbgcolor="#336699";
oncolor="#9D9FA1";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
}

subStyle1=new copyOf(menuStyle); 
subStyle1.offbgcolor="#8C9FBF"; 
subStyle1.offcolor="#ffffff";
subStyle1.onbgcolor="#336699"; 
subStyle1.oncolor="#ffffff"; 
subStyle1.separatorcolor="#758CC9"; 
subStyle1.padding=4; 
subStyle1.fontweight="normal";
  
subStyle2=new copyOf(menuStyle); 
subStyle2.offbgcolor="#9D9FA1"; 
subStyle2.offcolor="#ffffff";
subStyle2.onbgcolor="#666666"; 
subStyle2.oncolor="#ffffff"; 
subStyle2.separatorcolor="#758CC9";
subStyle2.padding=4;
subStyle2.fontweight="normal"; 
 
subStyle3=new copyOf(menuStyle); 
subStyle3.offbgcolor="#9FCC3C"; 
subStyle3.offcolor="#ffffff";
subStyle3.onbgcolor="#669900"; 
subStyle3.oncolor="#ffffff"; 
subStyle3.separatorcolor="#758CC9";
subStyle3.padding=4;
subStyle3.fontweight="normal";  
subStyle3.itemwidth=171; 
  
subStyle4=new copyOf(menuStyle); 
subStyle4.offbgcolor="#BC8490"; 
subStyle4.offcolor="#ffffff";
subStyle4.onbgcolor="#FF3333"; 
subStyle4.oncolor="#ffffff"; 
subStyle4.separatorcolor="#758CC9"; 
subStyle4.padding=4;
subStyle4.fontweight="normal";   
subStyle4.itemwidth=171; 



with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
align="center";
screenposition="center";
orientation="horizontal";
style=menuStyle;
top=0;
itemwidth=200;	
aI("showmenu=Milonic;text=Employees;");
aI("showmenu=Partners;text=Clients;offbgcolor=#9D9FA1;onbgcolor=#666666;");
aI("showmenu=Links;text=About Salem;offbgcolor=#9FCC3C;onbgcolor=#669900;");
aI("showmenu=MyMilonic;text=Contact Us;offbgcolor=#BC8490;onbgcolor=#FF3333;");
}

with(milonic=new menuname("Milonic")){
margin=7;
style=subStyle1;
itemwidth=175;
aI("showmenu=Career Center;status=Career Center;text=Career Center;");
aI("showmenu=Employee Resource Center;status=Employee Resource Center;text=Employee Resource Center;");
}

with(milonic=new menuname("Partners")){
margin=7;
style=subStyle2;
itemwidth=171; 
aI("showmenu=Client Services;status=Client Services;text=Client Services;");
aI("showmenu=Client Resource Center;status=Client Resource Center;text=Client Resource Center;");
}

with(milonic=new menuname("Links")){
margin=7;
style=subStyle3;
aI("status=History;text=History;url=http://www.saleminc.com/;");
aI("status=Management Team;text=Management Team;url=http://www.saleminc.com/;");
aI("status=Visions & Values;text=Visions & Values;url=http://www.saleminc.com/;");
aI("status=Fast Facts;text=Fast Facts;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Client Services")){
margin=7;
style=subStyle2;
itemwidth=230;
aI("text=Administrative Staffing;url=http://www.saleminc.com/;");
aI("text=Managed Staffing/Workforce Solutions;url=http://www.saleminc.com/;");
aI("text=IT/Tech Staffing;url=http://www.saleminc.com/;");
aI("text=Legal Staffing;url=http://www.saleminc.com/;");
aI("text=Land Professional Staffing;url=http://www.saleminc.com/;");
aI("text=Project Hiring/Payrolling;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Client Resource Center")){
margin=7;
style=subStyle2;
aI("text=Time Sheet Approval;url=http://www.saleminc.com/;");
aI("text=24/7 Requisitions;url=http://www.saleminc.com/;");
aI("text=Salem Support Systems;url=http://www.saleminc.com/;");
aI("text=Managed Services;url=http://www.saleminc.com/;");
aI("text=STREAMLINE;url=http://www.saleminc.com/;");
aI("text=How are we doing?;url=http://www.saleminc.com/;");
aI("text=Salem Team Members;url=http://www.saleminc.com/;");
aI("text=Useful Links;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Career Center")){
margin=7;
style=subStyle1;
itemwidth=130;
aI("text=Job Listing;url=http://www.saleminc.com/;");
aI("text=Working with Salem;url=http://www.saleminc.com/;");
aI("text=Diversity;url=http://www.saleminc.com/;");
aI("text=Staffing & Recruiting;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("Employee Resource Center")){
margin=7;
style=subStyle1;
itemwidth=190;
aI("text=Input Hours Worked;url=http://www.saleminc.com/;");
aI("text=Assignment/Full Time Openings;url=http://www.saleminc.com/;");
aI("text=Employee Benefits;url=http://www.saleminc.com/;");
aI("text=Rules & Regulations;url=http://www.saleminc.com/;");
aI("text=Highlights Newsletter;url=http://www.saleminc.com/;");
aI("text=Suggestions?;url=http://www.saleminc.com/;");
}

with(milonic=new menuname("MyMilonic")){
margin=7;
style=subStyle4;
aI("text=Chicago;url=mailto:chicago@saleminc.com");
aI("text=Deerfield;url=mailto:northshore@saleminc.com");
aI("text=Oakbrook Terrace;url=mailto:oakbrook@saleminc.com");
aI("text=Schaumburg;url=mailto:schaumburg@saleminc.com");
}

drawMenus();

copy that and save it as test_data.js and try using it and see if it's what you want.

Ruth

khammond · Post by **khammond** » Fri Nov 18, 2005 4:51 pm

Thank you for all your help Ruth

One thing I find interesting, none of the effects work on a mac. I have both a powerbook and a mac mini, as well as a normal pc and a normal pc laptop. None of the special effects work on either of the macs, but work on both pcs. Weird. I have used Safari, IE for Mac and Firefox for mac. They don't work on firefox for pc either.

Post by **Ruth** » Fri Nov 18, 2005 8:05 pm

Hi,

I'm not sure what you mean by special effects. If you mean the overfilter and outfilter those effects are from the IE Filters and Transitions, those are proprietary to Microsoft and will only work on IE for a pc, I believe they use active x.

IE Filters and Transitions Interactive Demo You can test different effects here.

If you mean something else, could you detail the problem?

Ruth