Separate TOp Menu Items
Separate TOp Menu Items
How do you separate the top line menu items? I am trying to add white space to the area between each item.
Is it that you just want the items wider, or do you really want a non mouseover function item inbetween the other items? If the first you can specify itemwidth= whatever you want, or you could use a rawcss="padding=2px 5px 2px 5px"; That would make the padding around items [clockwise starting at the top] 2px on the top and bottom and 5px on the right and left. You'd place that in the style definition for the particular menu. If the second idea I mentioned is what you want, you can put in a 'blank' item setting it as a header for example:
Ruth
Code: Select all
aI("text= ;itemwidth=10px;type=header;headerbgcolor=whatever color you want here;");
Ruth
I really want a clear separation between the menu items. Maybe different menus will work, but I want to avoid using multiple js files to accomplish it.
Also, an unrelated question - is there any way to create a CSS or HTML menu beneath the milonic menu? If users have scripts blocked, I need a backup navigation.
Also, an unrelated question - is there any way to create a CSS or HTML menu beneath the milonic menu? If users have scripts blocked, I need a backup navigation.
Last edited by rich_a1 on Sun Mar 06, 2005 6:15 pm, edited 1 time in total.
OK, here's what I have.
1. You need to remove the submenus from the embed_main_menu.js file and put them into the menu_data_orig.js file. The submenus must be built first, so they need to be in the file that is called immediately after the body tag, first thing on the page before anything else.
2. Although you have the main table 100% and centered, and then the table in which the menu is as 100%, you have that cell as 748, so there could be a problem in some browsers. Right now you call the menu in that table cell, in order to make sure that the menu is always centered even if someone has a higher resolution than 800x600, I'd suggest you do the following [it's not required]: I just inserted a one cell table that is between center tags and the menu in that cell.
3. To keep the border from being around the header areas, and to keep it as one file set the border to 0, leave the onborder which will put a border around the menu item when you mouseover. It's putting the border in that makes it go all the way around and makes the header not look like a 'space'.
4. This is the embed_main_menu.js file I did.
Try that and see if it will do what you want. You can adjust the header items to whatever you want. I put the first and last to just make sure that the first and last menu item didn't go beyond the beige section right and left borders. Hope that helps.
Ruth
1. You need to remove the submenus from the embed_main_menu.js file and put them into the menu_data_orig.js file. The submenus must be built first, so they need to be in the file that is called immediately after the body tag, first thing on the page before anything else.
2. Although you have the main table 100% and centered, and then the table in which the menu is as 100%, you have that cell as 748, so there could be a problem in some browsers. Right now you call the menu in that table cell, in order to make sure that the menu is always centered even if someone has a higher resolution than 800x600, I'd suggest you do the following [it's not required]:
Code: Select all
<TD vAlign=top align=left width=748 bgColor=#ffffff height=20><center> <table border="0" cellpadding="0" cellspacing="0" align="center" width=748>
<tr>
<td vAlign=top align=left width=748 bgColor=#ffffff height=20>
<SCRIPT src="embedded_main_menu.js"
type=text/javascript></SCRIPT></td>
</tr>
</table></center>
3. To keep the border from being around the header areas, and to keep it as one file set the border to 0, leave the onborder which will put a border around the menu item when you mouseover. It's putting the border in that makes it go all the way around and makes the header not look like a 'space'.
4. This is the embed_main_menu.js file I did.
Code: Select all
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
menuwidth=748;
align="center";
style=XPMainStyle;
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=1");
aI("showmenu=;text=Home;");
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=40");
aI("showmenu=Samples;text=Menu Samples;");
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=40");
aI("showmenu=Milonic;text=Milonic;");
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=1;itemwidth=40");
aI("showmenu=Partners;text=Partners;");
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=1;itemwidth=40");
aI("showmenu=Links;text=Links;");
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=1;itemwidth=40");
aI("showmenu=MyMilonic;text=My Milonic;");
aI("text= type=header;headerbgcolor=#ffffff;bordercolor=#ffffff;itemwidth=1");
}
drawMenus();
Ruth
Just posting here for any who read the information I gave in the other thread.
The reason your border shows is because you have margin=2. This is only an analogy, not exact but: think of your menu as a poster board colored that pretty blue, and then think of the items as separate things colored the same but cut out of say a magazine, and you posted each to the board. When you set margin at 2px in the main menu, it places a 2px edge around the item you 'pasted' to the board. You have padding set at 1 for that style. I elimated the margin=2 and changed the padding to 3 that kept the size and eliminated what looked like a border.
Ruth
The reason your border shows is because you have margin=2. This is only an analogy, not exact but: think of your menu as a poster board colored that pretty blue, and then think of the items as separate things colored the same but cut out of say a magazine, and you posted each to the board. When you set margin at 2px in the main menu, it places a 2px edge around the item you 'pasted' to the board. You have padding set at 1 for that style. I elimated the margin=2 and changed the padding to 3 that kept the size and eliminated what looked like a border.
Ruth