Nav Bar SubImage Help

[whiskey3]

http://www.moldex.com/foamplugprod/sparkplugs4.htm

I have an arrow sub image on my pull downd for the nav bar but I don't wan't them to appear in the top of the nav bar.....how do I lose them in the top but keep them in the pull down only?

[kevin3442]

The trick would be to apply different styles to the main menu and the sub menus.

Copy your style1 to a new style, eliminate the subimage from the new style, and apply the new style to your mainmenu. Like so:

beneath the definition for style1, add:

Code: Select all

styleMain=new copyOf(style1);
styleMain.subimage = null;

In your "mainmenu" definition change the style to

Code: Select all

style=styleMain;

You essentially have two styles this way, one to apply to the main menu and one to apply to submenus. But note that changes to style1 will affect styleMain. As an alternative, you could start with a baseStyle, then copy that to styleMain and styleSub and alter those as needed. Or, you could always define completely separate styles, without copying anything. This guarantees no inheritance, but it's more code to worry about.

Hope that helps,

Kevin

[whiskey3]

I tried this but it did the reverse that I wanted. It cleared out the arrow image in the pulldown of the nav....I wanted it removed in the top bar of the nav?

Link here:
http://www.moldex.com/foamplugprod/sparkplugs2.htm

What am I doing wrong?


Here is my code:

Code: Select all

fixMozillaZIndex = true;

_menuCloseDelay=500; 
_menuOpenDelay=150; 
_scrollAmount=3; 
_scrollDelay=20; 
_followSpeed=5; 
_followRate=40; 
_subOffsetTop=10; 
_subOffsetLeft=0; 


with(style1=new mm_style()){ 
offcolor="#000000"; 
offbgcolor="#6495ED"; 
oncolor="white"; 
onbgcolor="#6495ED"; 
bordercolor="#6495ED"; 
borderstyle="solid"; 
borderwidth=0; 
fontsize=11; 
fontstyle="normal"; 
fontweight="bold"; 
fontfamily="Verdana, Arial"; 
padding=4; 
subimage="arrow.gif"; 
//high3dcolor="#33CCFF"; 
//low3dcolor="#000099"; 
headercolor="#ffffff"; 
headerbgcolor="#000099"; 
separatorcolor="6495ED"; 
separatorsize=1; 
overfilter="Fade(duration=0.2);Alpha(opacity=88);Shadow(color=#777777', Direction=135, Strength=5)"; 
//outfilter="randomdissolve(duration=0.3)"; 
} 

style2=new copyOf(style1); 
style2.separatorsize=1; 
style2.separatorcolor="#66CCFF";
styleMain=new copyOf(style1); 
styleMain.subimage = null;

with(milonic=new menuname("mainmenu")){ 
top=87; 
//left=450; 
screenposition="center"; 
style=style1; 
alwaysvisible=1; 
orientation="horizontal"; 
aI("text=Home;url=http://www.moldex.com/unitedstatesproducts.htm;separatorsize=25"); 
aI("text=Products ;showmenu=products;separatorsize=25"); 
aI("text=Tech Info ;showmenu=techinfo;separatorsize=25"); 
aI("text=Contact Us ;showmenu=contact;separatorsize=20"); 
aI("text=Support ;showmenu=support;separatorsize=20"); 
aI("text=Our Company ;showmenu=ourcompany;separatorsize=20"); 
aI("text=Search;url=http://www.moldex.com/search.htm;separatorsize=20"); 
} 

with(milonic=new menuname("products")){ 
itemwidth=210; 
style=styleMain; 
aI("text=Hearing Protection;showmenu=hearingprotection;"); 
aI("text=Respiratory Protection;showmenu=respprotection;"); 
aI("text=Accessories;url=http://www.moldex.com/accessories.htm;"); 
aI("text=What's New;url=http://www.moldex.com/whatsnew.htm;"); 
aI("text=Competitive Cross References;url=http://www.moldex.com/compcrossreference.htm;"); 
aI("text=Image Downloads;url=ftp://ftp.moldex.com;"); 
aI("text=Literature Downloads;url=http://www.moldex.com/literaturedownloads.htm;"); 
aI("text=Request Samples & Literature;url=http://www.moldex.com/requestsamples.htm;"); 
} 

with(milonic=new menuname("hearingprotection")){ 
itemwidth=110; 
style=style1; 
alignment="left"; 
aI("text=Foam Plugs;url=http://www.moldex.com/foamplugs.htm;"); 
aI("text=Reusable Plugs;url=http://www.moldex.com/reusableplugs.htm;"); 
aI("text=Muffs;url=http://www.moldex.com/muffs.htm;"); 
aI("text=Bands;url=http://www.moldex.com/bands.htm;"); 
} 

with(milonic=new menuname("respprotection")){ 
itemwidth=90; 
style=style1; 
alignment="left"; 
aI("text=Disposables;url=http://www.moldex.com/disposablerespirators.htm;"); 
aI("text=8000 Series;url=http://www.moldex.com/8000series.htm;"); 
} 

with(milonic=new menuname("techinfo")){ 
itemwidth=210; 
style=style1; 
aI("text=CBRN Warning;url=http://www.moldex.com/pdfs/misc/CBRN_warning.pdf;"); 
aI("text=Chemical Selection Guide;url=http://www.moldex.com/chemicalselectionguide.htm;"); 
aI("text=Competitive Cross References;url=http://www.moldex.com/compcrossreference.htm;"); 
aI("text=FAQ's;url=http://www.moldex.com/faqs.htm;"); 
aI("text=Fit Testing;url=http://www.moldex.com/fittesting.htm;"); 
aI("text=Fitting Instructions;url=http://www.moldex.com/fittinginstructions.htm;"); 
aI("text=Links;url=http://www.moldex.com/links.htm;"); 
aI("text=MSDS's;url=http://www.moldex.com/msds.htm;"); 
aI("text=Tech Briefs;url=http://www.moldex.com/techbriefs.htm;"); 
} 

with(milonic=new menuname("contact")){ 
itemwidth=180; 
style=style1; 
aI("text=sales@moldex.com;url=mailto:sales@moldex.com;"); 
aI("text=Corporate Office;showmenu=corporate;"); 
aI("text=Distributor Locator;url=http://www.moldex.com/distributorlocator.htm;"); 
aI("text=United States Sales Reps;url=http://www.moldex.com/unitedstatessalesreps.htm;"); 
aI("text=International Sales Reps;url=http://www.moldex.com/internationalsalesreps.htm;"); 
aI("text=Suggestion Box;url=http://www.moldex.com/suggestionbox.htm;"); 
} 

with(milonic=new menuname("corporate")){ 
itemwidth=160; 
style=style1; 
alignment="left"; 
aI("text=Accounting;url=http://www.moldex.com/corporateoffice/accounting.htm;"); 
aI("text=Customer Support;url=http://www.moldex.com/corporateoffice/customersupport.htm;"); 
aI("text=Key Contacts;url=http://www.moldex.com/corporateoffice/keycontacts.htm;"); 
aI("text=Marketing;url=http://www.moldex.com/corporateoffice/marketing.htm;"); 
aI("text=Technical Services;url=http://www.moldex.com/corporateoffice/technicalservices.htm;"); 
aI("text=Becoming a Distributor;url=http://www.moldex.com/corporateoffice/becomingadistributor.htm;"); 
} 

with(milonic=new menuname("support")){ 
itemwidth=140; 
style=style1; 
aI("text=Distributor Tools;url=http://www.moldex.com/distributortools.htm;"); 
aI("text=Training Resources;url=http://www.moldex.com/trainingresources.htm;"); 
} 

with(milonic=new menuname("ourcompany")){ 
itemwidth=160; 
style=style1; 
aI("text=About Us;url=http://www.moldex.com/aboutus.htm;"); 
aI("text=Limited Warranty;url=http://www.moldex.com/limitedwarranty.htm;"); 
aI("text=Worldwide Websites;showmenu=worldwidewebsites;"); 
} 

with(milonic=new menuname("worldwidewebsites")){ 
itemwidth=120; 
style=style1; 
alignment="left"; 
aI("text=Australia;url=http://www.moldex.com/australia/australianproducts.htm;"); 
aI("text=Brazil;url=http://www.moldex.com/brazil/brazilianproducts.htm;"); 
aI("text=Canada;url=http://www.moldex.com/canada/canadianproducts.htm;"); 
aI("text=Czech Republic;url=http://www.moldex-europe.com;"); 
aI("text=France;url=http://www.moldex-europe.com;"); 
aI("text=Germany;url=http://www.moldex-europe.com;"); 
aI("text=Israel;url=http://www.moldex.com/unitedstatesproducts.htm;"); 
aI("text=Italy;url=http://www.moldex-europe.com;"); 
aI("text=Japan;url=http://www.moldex.com/unitedstatesproducts.htm;"); 
aI("text=Mexico;url=http://www.moldex.com/spanish/spanishproducts.htm;"); 
aI("text=Netherlands;url=http://www.moldex-europe.com;"); 
aI("text=New Zealand;url=http://www.moldex.com/australia/australianproducts.htm;"); 
aI("text=South America;url=http://www.moldex.com/spanish/spanishproducts.htm;"); 
aI("text=Spain;url=http://www.moldex-europe.com;"); 
aI("text=Sweden;url=http://www.moldex-europe.com;"); 
aI("text=United Kingdom;url=http://www.moldex-europe.com;"); 
aI("text=United States;url=http://www.moldex.com/unitedstatesproducts.htm;"); 
} 

drawMenus();

[Ruth]

Hi,

You created the style as Kevin noted, but you did not apply it to the main menu.

Code: Select all

with(milonic=new menuname("mainmenu")){ 
top=87; 
//left=450; 
screenposition="center"; 
style=style1; 
alwaysvisible=1; 
orientation="horizontal"; 

That style=style1, should be style=styleMain;

Ruth

[whiskey3]

Ok I gotcha thanks again.

[whiskey3]

I added the main part in but now my arrow images under hearing protection foam plugs etc. have disappeared? But the appear to the right side of the nav bar pulldowns? What causes that please?

http://www.moldex.com/foamplugprod/sparkplugs2.htm

[Ruth]

Hi,

I cannot get to your site so I cannot see what you've done with regard to the images since I can't see the data file.

One thing I noted here in the previously posted code is alignment= there is no property called alignment, it is align and align="left"; is really not necessary since that is the default position of the text unless you specify something else.

...now my arrow images under hearing protection foam plugs etc. have disappeared? But the appear to the right side of the nav bar pulldowns?

Either they have disappeared or they are appearing on the right. When I can get to your site, I'll try and see what the problem is.

You might take a look under my name at the links there. There is a beginners' forum which has some explanations on how to create styles, there are also links below my name at the bottom to various style properties, that is, those that go in the menu, those that go into a style and those that can be put into the aI string. Those properties are listed alphabetically and you'd be able to see the various things you can put into a style.

In the beginners section you might want to check out the 3 part section on creating styles. It's a quick read and very basic but will give you an idea.

Ruth

[Ruth]

Hi,

I'm not sure, but you need to check which style you are putting into which menus to see if you're using the one with the subimages for the menus in which you want the subimages. For example, in the code you posted before you have

Code: Select all

with(milonic=new menuname("products")){ 
itemwidth=210; 
style=styleMain; 
aI("text=Hearing Protection;showmenu=hearingprotection;"); 
aI("text=Respiratory Protection;showmenu=respprotection;"); 
aI("text=Accessories;url=http://www.moldex.com/accessories.htm;"); 
aI("text=What's New;url=http://www.moldex.com/whatsnew.htm;"); 
aI("text=Competitive Cross References;url=http://www.moldex.com/compcrossreference.htm;"); 
aI("text=Image Downloads;url=ftp://ftp.moldex.com;"); 
aI("text=Literature Downloads;url=http://www.moldex.com/literaturedownloads.htm;"); 
aI("text=Request Samples & Literature;url=http://www.moldex.com/requestsamples.htm;"); 
} 

That is the products menu which opens the hearing stuff, but you have that coded as styleMain, that means there's no subimage in the products menu to show that there is a submenu for the hearing stuff.

Please note, the style that is placed in a menu is for that menu, not for the menus that open from it, or for an item etc. So, if you don't want an arrow in the horizontal main menu use styleMain, if you do want the subimages in some menus then use the style1 or the style2 depending on whether you want separators or not since both of them use the same exact style except for the separators.

If there is some other problem I have to wait until I see your newest data file.

Ruth

[whiskey3]

I guess when you tried last night the server was down....could you please look again?

Thanks,

[kevin3442]

Hi Wolf,

I'm looking at your current code (from your site). You created a copy of style1 called styleMain, and made the subimage null for styleMain. So far so good. Then you applied styleMain to the "mainmenu" and the "products" menu. This is why your products menu no longer shows the arrows for the items that open submenus. Note that your other submenus that branch off of the main menu are still using style1, so they still have the arrows where appropriate.

I've pasted some menu_data code below... it's basically your code with some slightly modified style settings. Here's what I did: (1) created a base style called baseStyle (not too creative, I know). (2) copied baseStyle to mainStyle and left it alone; right now, baseStyle and mainStyle are identical. (3) Copied baseStyle to a third style called subStyle, and added subimage="arrow.gif"; to it. For now, the only difference between mainStyle and subStyle is that subStyle has a subimage defined (the arrow) and mainStyle does not. (4) Applied mainStyle to "mainmenu". (5) Applied subStyle to all of the other menus.

With this setup, if you want to make a style change that'll affect all of your menus (e.g., change the background color), then make the change in baseStyle. The change will copy automatically to the other two styles. If you want to change a style property of the main menu only *e.g., change the text color used for the main menu), then make the change in mainStyle. If you want to change a style property of all the submenus, then make the change in subStyle (subStyle.propertyname = propertyvalue).

Here's the code... you can copy it right out of this page and paste it over (replace) the code currently in your menu_data.js file.

Cheers,

Kevin

Code: Select all

//////////////////////////
// Global menu properties

fixMozillaZIndex = true;

_menuCloseDelay=500;
_menuOpenDelay=150;
_scrollAmount=3;
_scrollDelay=20;
_followSpeed=5;
_followRate=40;
_subOffsetTop=10;
_subOffsetLeft=0;


///////////////
// Menu styles

// baseStyle is for properties shared by mainmenu and submenus.
with(baseStyle=new mm_style()){
offcolor="#000000";
offbgcolor="#6495ED";
oncolor="white";
onbgcolor="#6495ED";
bordercolor="#6495ED";
borderstyle="solid";
borderwidth=0;
fontsize=11;
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana, Arial";
padding=4;
//high3dcolor="#33CCFF";
//low3dcolor="#000099";
headercolor="#ffffff";
headerbgcolor="#000099";
separatorcolor="6495ED";
separatorsize=1;
overfilter="Fade(duration=0.2);Alpha(opacity=88);Shadow(color=#777777', Direction=135, Strength=5)";
//outfilter="randomdissolve(duration=0.3)";
}

// Style for mainmenu is mainStyle
mainStyle=new copyOf(baseStyle);

// Style for submenus is subStyle
subStyle=new copyOf(baseStyle);
subStyle.subimage="arrow.gif"


////////////////////
// Menu definitions

with(milonic=new menuname("mainmenu")){
style=mainStyle;
top=87;
//left=450;
screenposition="center";
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=http://www.moldex.com/unitedstatesproducts.htm;separatorsize=25");
aI("text=Products ;showmenu=products;separatorsize=25");
aI("text=Tech Info ;showmenu=techinfo;separatorsize=25");
aI("text=Contact Us ;showmenu=contact;separatorsize=20");
aI("text=Support ;showmenu=support;separatorsize=20");
aI("text=Our Company ;showmenu=ourcompany;separatorsize=20");
aI("text=Search;url=http://www.moldex.com/search.htm;separatorsize=20");
}

with(milonic=new menuname("products")){
style=subStyle;
itemwidth=210;
aI("text=Hearing Protection;showmenu=hearingprotection;");
aI("text=Respiratory Protection;showmenu=respprotection;");
aI("text=Accessories;url=http://www.moldex.com/accessories.htm;");
aI("text=What's New;url=http://www.moldex.com/whatsnew.htm;");
aI("text=Competitive Cross References;url=http://www.moldex.com/compcrossreference.htm;");
aI("text=Image Downloads;url=ftp://ftp.moldex.com;");
aI("text=Literature Downloads;url=http://www.moldex.com/literaturedownloads.htm;");
aI("text=Request Samples & Literature;url=http://www.moldex.com/requestsamples.htm;");
}

with(milonic=new menuname("hearingprotection")){
style=subStyle;
itemwidth=110;
alignment="left";
aI("text=Foam Plugs;url=http://www.moldex.com/foamplugs.htm;");
aI("text=Reusable Plugs;url=http://www.moldex.com/reusableplugs.htm;");
aI("text=Muffs;url=http://www.moldex.com/muffs.htm;");
aI("text=Bands;url=http://www.moldex.com/bands.htm;");
}

with(milonic=new menuname("respprotection")){
style=subStyle;
itemwidth=90;
alignment="left";
aI("text=Disposables;url=http://www.moldex.com/disposablerespirators.htm;");
aI("text=8000 Series;url=http://www.moldex.com/8000series.htm;");
}

with(milonic=new menuname("techinfo")){
style=subStyle;
itemwidth=210;
aI("text=CBRN Warning;url=http://www.moldex.com/pdfs/misc/CBRN_warning.pdf;");
aI("text=Chemical Selection Guide;url=http://www.moldex.com/chemicalselectionguide.htm;");
aI("text=Competitive Cross References;url=http://www.moldex.com/compcrossreference.htm;");
aI("text=FAQ's;url=http://www.moldex.com/faqs.htm;");
aI("text=Fit Testing;url=http://www.moldex.com/fittesting.htm;");
aI("text=Fitting Instructions;url=http://www.moldex.com/fittinginstructions.htm;");
aI("text=Links;url=http://www.moldex.com/links.htm;");
aI("text=MSDS's;url=http://www.moldex.com/msds.htm;");
aI("text=Tech Briefs;url=http://www.moldex.com/techbriefs.htm;");
}

with(milonic=new menuname("contact")){
style=subStyle;
itemwidth=180;
aI("text=sales@moldex.com;url=mailto:sales@moldex.com;");
aI("text=Corporate Office;showmenu=corporate;");
aI("text=Distributor Locator;url=http://www.moldex.com/distributorlocator.htm;");
aI("text=United States Sales Reps;url=http://www.moldex.com/unitedstatessalesreps.htm;");
aI("text=International Sales Reps;url=http://www.moldex.com/internationalsalesreps.htm;");
aI("text=Suggestion Box;url=http://www.moldex.com/suggestionbox.htm;");
}

with(milonic=new menuname("corporate")){
style=subStyle;
itemwidth=160;
alignment="left";
aI("text=Accounting;url=http://www.moldex.com/corporateoffice/accounting.htm;");
aI("text=Customer Support;url=http://www.moldex.com/corporateoffice/customersupport.htm;");
aI("text=Key Contacts;url=http://www.moldex.com/corporateoffice/keycontacts.htm;");
aI("text=Marketing;url=http://www.moldex.com/corporateoffice/marketing.htm;");
aI("text=Technical Services;url=http://www.moldex.com/corporateoffice/technicalservices.htm;");
aI("text=Becoming a Distributor;url=http://www.moldex.com/corporateoffice/becomingadistributor.htm;");
}

with(milonic=new menuname("support")){
style=subStyle;
itemwidth=140;
aI("text=Distributor Tools;url=http://www.moldex.com/distributortools.htm;");
aI("text=Training Resources;url=http://www.moldex.com/trainingresources.htm;");
}

with(milonic=new menuname("ourcompany")){
style=subStyle;
itemwidth=160;
aI("text=About Us;url=http://www.moldex.com/aboutus.htm;");
aI("text=Limited Warranty;url=http://www.moldex.com/limitedwarranty.htm;");
aI("text=Worldwide Websites;showmenu=worldwidewebsites;");
}

with(milonic=new menuname("worldwidewebsites")){
style=subStyle;
itemwidth=120;
alignment="left";
aI("text=Australia;url=http://www.moldex.com/australia/australianproducts.htm;");
aI("text=Brazil;url=http://www.moldex.com/brazil/brazilianproducts.htm;");
aI("text=Canada;url=http://www.moldex.com/canada/canadianproducts.htm;");
aI("text=Czech Republic;url=http://www.moldex-europe.com;");
aI("text=France;url=http://www.moldex-europe.com;");
aI("text=Germany;url=http://www.moldex-europe.com;");
aI("text=Israel;url=http://www.moldex.com/unitedstatesproducts.htm;");
aI("text=Italy;url=http://www.moldex-europe.com;");
aI("text=Japan;url=http://www.moldex.com/unitedstatesproducts.htm;");
aI("text=Mexico;url=http://www.moldex.com/spanish/spanishproducts.htm;");
aI("text=Netherlands;url=http://www.moldex-europe.com;");
aI("text=New Zealand;url=http://www.moldex.com/australia/australianproducts.htm;");
aI("text=South America;url=http://www.moldex.com/spanish/spanishproducts.htm;");
aI("text=Spain;url=http://www.moldex-europe.com;");
aI("text=Sweden;url=http://www.moldex-europe.com;");
aI("text=United Kingdom;url=http://www.moldex-europe.com;");
aI("text=United States;url=http://www.moldex.com/unitedstatesproducts.htm;");
}

drawMenus();

[whiskey3]

Thanks a bunch this is exactly what I wanted. This forum rocks big time. The older 3.0 menu was easier for me..... this one has so many options it will take a little more time for me to grasp it fully. Thanks for taking the time to tweak it for me....