Menu Questions

[Dustin Cook]

Hello! I recently downloaded and I am currently trying to get the menu to run on my web site, I have a few questions though.

1) How do I move the bar so that it will sit in the grey bar in the banner?

2) Is it possible to make the menu completely transparent (with white links)?

3) Is it possible to make the drop down grey?

4) How can I make the links be white, until they are rolled over by the mouse when the background turns blue, and the text orange.

I realise there is a lot here, but I would appricate the help if anyone can provide it.

With thanks,

DC.

[Ruth]

Hi,

1. You have to place the menu position="relative"; see the post at the top of this forum which has more information. The example is here

http://support.milonic.com/beginners/ta ... /index.htm

2. offbgcolor and onbgcolor set the background colors and offcolor and oncolor set the font colors depending on mouse position. Transparent is a valid color option, offbgcolor="transparent"; etc.

3. Yes, you can make the drop down different. See this forum, there are 3 sections on Styling The Menu, Part I, etc.

viewforum.php?f=14

4. that is the offcolor/oncolor options in the style.

You really do need to look at the links I posted, so you understand how to do this. Below I posted code with your menu set up, something like you want.

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;
buildAfterLoad=true;

with(menuStyle=new mm_style()){
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize=11;
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#ffffff";
onbgcolor="transparent";
oncolor="#FFCC00";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#ffa500";
pagecolor="#ffffff";
separatorcolor="#ffffff";
separatorsize=1;
separatorpadding=4;
subimage="arrow_dn.gif";
subimagepadding=4;
}

//copyOf method to create sub menus style see http://milonic.com/forum/viewtopic.php?f=14&t=4595
//This style also uses css classes to create the border look and leave out the top
//border of the submenus. This class is added to the stylesheet.

subStyle=new copyOf(menuStyle); 
subStyle.offbgcolor="#858390"; 
subStyle.onbgcolor="#0d3894";
subStyle.separatorsize=0;
subStyle.offclass="brdr";
subStyle.onclass="brdr";


//Main menu is positioned relatively, with menu width at 100% 

with(milonic=new menuname("LumenOrbis")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
menuwidth="100%";
position="relative";
aI("showmenu=Bible Study;text=Bible Study;");
aI("showmenu=Church Teachings;text=Church Teachings;");
aI("showmenu=Worship;text=Worship;");
aI("showmenu=Catholic Links;text=Catholic Links;");
aI("showmenu=Library Resources;text=Library Resources;");
aI("showmenu=Features;text=Features;");
aI("text=Iosas Community;url=iosas.htm;");
}

Things to note. You must add this class to your css stylesheet

Code: Select all

.brdr{border-top:1px transparent solid;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #ffffff;text-decoration:none;}

This is the class called in the offclass/onclass which does the border on the sub menus. Also, make sure you rename the menuStyle in each of the submenus to subStyle....

Hope this helps.

Ruth

EDIT: 10/23/07 to make correction

[Dustin Cook]

That is great, many thanks for the help. I will try and implement these later. I do have one extra question. How do I make some of the link target to 'iframe' and others to '_blank''?

Ruth - I copied and pasted that code directly into the document, and now the menu does not appear on the page?! I copy and pasted over the original coding. Any ideas why this may be happening?

Many thanks for the help so far,

DC.

[Ruth]

Hi,

It seems I missed a with before the main menu call when I did the copy paste. It should be

Code: Select all

with(milonic=new menuname("LumenOrbis")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
menuwidth="100%";
position="relative";

Sorry.

Ruth

[Dustin Cook]

Don't be sorry at all, I asked becuase any time I tried to edit the menu before posting, it always made it disappear too!! A few further things:

1) How do I target links to an 'frame' and '_blank'?
2) How can I change the width of the menu, becuase, as you can see from the page, its a tad too big and causing the logo to split!
3) How do I remove the underlines from the text links?

Many thanks.

DC.

[Dustin Cook]

Does anyone have any ideas how to make the height of the menu that little bit smaller so that it doesn't distort the logo?

Cheers,
DC.

[Ruth]

1) How do I target links to an 'frame' and '_blank'?
2) How can I change the width of the menu, becuase, as you can see from the page, its a tad too big and causing the logo to split!
3) How do I remove the underlines from the text links.

1. use target=nameOfIframe, and target=new or blank. Also, you need to put name= and id= in your iframe coding on your page because some [older browsers] use name to find it and some use id. They are the same name of course, i.e. name=myiframe; id=myiframe;

2. I'm not seeing anything wrong in the width. The menu is in that table cell so it is the width of the table cell, however you can specify a width in the menu. menuwidth=; you can use a percentage or a fixed width.

3. You left the offclass and onclass in the subStyle. That's causing the underline because the menu is thinking it has a class but that class isn't declared in the stylesheet. If you noted what I had it included text-decoration:none; in the class, so remove this part

Code: Select all

subStyle.offclass="brdr";
subStyle.onclass="brdr";

I don't know what you're seeing as to width, but I have both ie and ff and resolution x800x600 and I'm not seeing anything like that.

If you look below my name you'll see links to style, menu and item properties. Those are alphabetized and you can check on the target property and how to do it.

Ruth

[Dustin Cook]

Oh, many many thanks for the help!! But I am stupid, I did not mean wdith, I meant the height of the menu (which I can not see in the properties link) can I make it a little smaller, so that the image does not start to repeat itself?

With many thanks,
DC.

[Ruth]

Hi,

There are 3 different 'classes' of properties: properties which go into the style section and would apply to all menus that use that style; properties that go in the menu, like alwaysvisible etc. and apply to the particular menu; and item properties which go in an item. Many of the style properties can also be used as item properties. They are all alphabetized on their respective pages.

No, there is no height, width etc. That is because the program needs to apply it to specific things, so the widths are, for example, itemwidth, itemheight, menuwidth, menuheight, and so on.

The menuheight applies to the surrounding menu, the itemheight applies to each item. Be aware that any menu which is not made of fixed sized images will change size, no matter what you set, when font size changes, and that will also change size, again, no matter what you set, due to browser functions for accessibility. [except IE which will only do it if the user has actually checked accessibility].

Hope that helps. Excuse the long post, but it helps for anyone needing the info on things like height and width

Ruth

[Dustin Cook]

Hello.

Thanks for the pages they are very useful indeed. I changed the menu_data.js file to include the line:

menuheight="90%";

But this has had no effect on the menu? And I have read the pages, but I can't see why? Any ideas?

Thanks for thge help so far.

DC.

[Dustin Cook]

Well, I found a fix for the problem. I changed the padding=4 and it solved my solutiom.

This thread can now be locked if you wish. I just want to say thanks to Ruth for your kind help with getting the menu to function correctly. You help was great, and without it, this site would not be as near to launching officially if it was not for your time and support.

Many thanks.
DC.

[Ruth]

Hi,

menuheight="90%"; affects the 'surrounding' container. I don't 'know what colors you have, but if it is transparent, then you actually won't see the menu since it will take the offbgcolor of transparent, so maybe the container is actually 'bigger' but the items don't have a height set so they would still stay 'shorter'.

It's really difficult to explain, but as they say a picture is worth a thousand words, so try this. First, make yourself a copy of the menu_data. js file and name it something else so you have it for testing, say test_data.js.

In the style set it like this

Code: Select all

borderwidth=3;
bordercolor="#000000";
borderstyle="double";
offbgcolor="#000000"; 
onbgcolor="#ffff00";
menubgcolor="#ff0000"; 
offborder="1px solid #ffffff;
onborder="1px solid #000000"; 

Finally go to the main menu and add margin=8;

Then call it on a page, you'll see by the colors set the various things, like the menu which will be colored red, the items with black off and yellow on bgcolors, and the border around the menu, and then the borders around the items.

Ruth