Corporate Menu

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

Corporate Menu

Poster: khammond
Dated: Tuesday November 15 2005 - 17:17:45 GMT

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.

Poster: Ruth
Dated: Tuesday November 15 2005 - 17:43:17 GMT

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

Poster: khammond
Dated: Wednesday November 16 2005 - 20:50:02 GMT

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)

Poster: Ruth
Dated: Thursday November 17 2005 - 0:38:41 GMT

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

Poster: khammond
Dated: Thursday November 17 2005 - 18:48:22 GMT

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?

Poster: Ruth
Dated: Thursday November 17 2005 - 19:42:44 GMT

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

Poster: khammond
Dated: Thursday November 17 2005 - 20:06:10 GMT

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:

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=chicago __at__ saleminc.com");
aI("text=Deerfield;url=northshore __at__ saleminc.com");
aI("text=Oakbrook Terrace;url=oakbrook __at__ saleminc.com");
aI("text=Schaumburg;url=schaumburg __at__ saleminc.com");
}

drawMenus();

Poster: Ruth
Dated: Thursday November 17 2005 - 23:29:42 GMT

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:

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=chicago __at__ saleminc.com");
aI("text=Deerfield;url=northshore __at__ saleminc.com");
aI("text=Oakbrook Terrace;url=oakbrook __at__ saleminc.com");
aI("text=Schaumburg;url=schaumburg __at__ 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

Poster: khammond
Dated: Friday November 18 2005 - 15:51:00 GMT

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.

Poster: Ruth
Dated: Friday November 18 2005 - 19:05:36 GMT

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

Industrial Strength JavaScript and DHTML Menus

Corporate Menu